/* =====================================================
GLOBAL TOGGLE SWITCH — Professional Override
Applies to all pages that use .toggle-switch / .switch / .slider
===================================================== */
.toggle-switch {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #374151 !important;
user-select: none !important;
vertical-align: middle !important;
background: transparent !important; /* Reset stray backgrounds */
width: auto !important; /* Reset stray widths */
height: auto !important; /* Reset stray heights */
}
.toggle-switch::after, .toggle-switch::before {
display: none !important; /* Remove rogue secondary dots */
}
.sidebar-close {
display: none;
position: absolute;
top: 15px;
right: 15px;
font-size: 20px;
cursor: pointer;
color: #555;
z-index: 10000;
}
/* Mobile view me hi show hoga */
@media (max-width: 768px) {
.sidebar-close {
display: block;
}
}
.switch {
position: relative !important;
display: inline-block !important;
width: 44px !important;
height: 24px !important;
flex-shrink: 0 !important;
}
.switch input[type="checkbox"] {
position: absolute !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.slider {
position: absolute !important;
cursor: pointer !important;
inset: 0 !important;
background-color: #d1d5db !important;
border-radius: 34px !important;
transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.12) !important;
}
.slider::before {
content: "" !important;
position: absolute !important;
height: 18px !important;
width: 18px !important;
left: 3px !important;
bottom: 3px !important;
background-color: #fff !important;
border-radius: 50% !important;
transition: transform 0.25s ease !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.18) !important;
}
.switch input[type="checkbox"]:checked + .slider {
background-color: #3b82f6 !important;
box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}
.switch input[type="checkbox"]:checked + .slider::before {
transform: translateX(20px) !important;
}
.toggle-switch:hover .slider {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.15), 0 0 0 3px rgba(59,130,246,0.1) !important;
}
/* ===================================================== */
/* --- CSS from activity.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; flex-wrap: wrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-block; text-decoration: none;}
.btn-outline:hover { background: #f9f9f9; }
/* Cards */
.card{
height: auto;
}
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; overflow: hidden; }
.card-header-flex { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.card-header-title { font-size: 16px; font-weight: 700; color: #111; }
.card-header-right { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #777; font-weight: 500; }
.card-body { padding: 25px; }
.card-footer-center { padding: 20px 25px; border-top: 1px solid #f1f1f4; display: flex; justify-content: center; }
.card-footer-center a { color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.card-footer-center a:hover { text-decoration: underline; }
/* Toggle Switch */
.toggle-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(16px); }
/* Activity Layout */
.activity-layout { display: grid; grid-template-columns: 1fr 60px; gap: 30px; }
@media(max-width: 768px) { .activity-layout { grid-template-columns: 1fr; } .year-anchors { display: none !important; } }
/* Year Anchors */
.year-anchors { display: flex; flex-direction: column; gap: 15px; border-left: 2px solid #f1f1f4; padding-left: 15px; position: sticky; top: 20px; align-self: start; }
.year-anchors a { color: #999; font-size: 12px; font-weight: 600; text-decoration: none; transition: 0.2s; position: relative; }
.year-anchors a:hover, .year-anchors a.active { color: #3b82f6; }
.year-anchors a.active::before { content: ''; position: absolute; left: -19px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: #3b82f6; border-radius: 50%; }
/* Activity List */
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-item { display: flex; gap: 20px; padding: 25px 0; border-bottom: 1px dashed #e5e7eb; }
.activity-item:first-child { padding-top: 0; }
.activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-icon { width: 35px; height: 35px; border-radius: 50%; background: #f9f9fb; border: 1px solid #f1f1f4; display: flex; align-items: center; justify-content: center; color: #555; flex-shrink: 0; font-size: 14px; }
.activity-content { flex: 1; }
.activity-text { font-size: 14px; color: #333; line-height: 1.5; margin-bottom: 5px; }
.activity-text a { color: #3b82f6; text-decoration: none; font-weight: 500; }
.activity-text a:hover { text-decoration: underline; }
.activity-time { font-size: 12px; color: #999; }
/* Inner Cards */
.inner-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-top: 15px; }
/* Inner Card - Flex layout */
.inner-flex { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.inner-thumb { position: relative; flex-shrink: 0; }
.inner-thumb img { width: 120px; height: 80px; border-radius: 6px; object-fit: cover; }
.badge-new { position: absolute; top: -10px; left: -10px; background: #eff6ff; color: #3b82f6; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; border: 1px solid #bfdbfe; }
.inner-details { flex: 1; min-width: 200px; }
.inner-badge { font-size: 10px; font-weight: 700; color: #3b82f6; text-transform: uppercase; margin-bottom: 5px; display: inline-block; }
.inner-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 5px; }
.inner-desc { font-size: 13px; color: #777; line-height: 1.5; }
/* Inner Card - Top/Bottom layout */
.inner-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
.inner-link { font-size: 13px; color: #3b82f6; font-weight: 600; text-decoration: none; }
.inner-link:hover { text-decoration: underline; }
.inner-footer { display: flex; align-items: center; gap: 30px; font-size: 13px; color: #777; flex-wrap: wrap; }
.inner-footer span { font-weight: 600; color: #555; }
.progress-wrap { display: flex; align-items: center; gap: 10px; }
.progress-bar { width: 100px; height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: #22c55e; width: 65%; }
.avatar-group { display: flex; align-items: center; }
.avatar-group img { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; }
.avatar-group img:first-child { margin-left: 0; }
.avatar-more { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; background: #3b82f6; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
/* Inner Card - Center layout */
.inner-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 10px; }
.inner-center img { width: 150px; margin-bottom: 15px; }
.inner-center .inner-title { margin-bottom: 5px; }
.inner-center .inner-desc { margin-bottom: 15px; display: flex; align-items: center; gap: 10px;}
/* Inner Card - Right actions */
.inner-flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.inner-actions { display: flex; align-items: center; gap: 20px; }
.action-stat { display: flex; flex-direction: column; gap: 5px; text-align: center; }
.action-label { font-size: 10px; font-weight: 700; color: #999; text-transform: uppercase; }
.stars { color: #f59e0b; font-size: 12px; }
.btn-primary-sm { background: #3b82f6; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
/* Support Grid */
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
@media(max-width: 900px) { .support-grid { grid-template-columns: 1fr; } }
.support-card { display: flex; flex-direction: column; padding: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.support-body { padding: 30px; display: flex; justify-content: space-between; align-items: flex-start; flex: 1; }
.support-content { max-width: 250px; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; }
.support-ill { font-size: 50px; color: #cbd5e1; display: flex; align-items: center; justify-content: center; }
.support-footer { padding: 15px; border-top: 1px solid #f1f1f4; text-align: center; background: #fafafa; }
.support-link { color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from api-keys.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-block; text-decoration: none;}
.btn-outline:hover { background: #f9f9f9; }
.btn-primary { background: #3b82f6; color: #fff; border: none; padding: 8px 15px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.3s; display: inline-block; text-decoration: none; }
.btn-primary:hover { background: #2563eb; }
/* Main Grid Layout */
.page-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-bottom: 30px; }
@media(max-width: 1024px) { .page-grid { grid-template-columns: 1fr; } }
/* Cards */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; overflow: hidden; }
.card-header-flex { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.card-header-title { font-size: 16px; font-weight: 700; color: #111; }
.card-header-right { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #777; }
.card-body { padding: 25px; }
/* Toggle Switch */
.toggle-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(16px); }
/* Form Elements */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: #111; margin-bottom: 8px; }
.form-control { width: 100%; border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 15px; font-size: 13px; outline: none; background: #fff; transition: border-color 0.2s; }
.form-control:focus { border-color: #3b82f6; }
select.form-control { appearance: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 10px center; }
/* API Key Input Group */
.api-input-group { display: flex; align-items: stretch; margin-bottom: 10px; }
.api-input-group .form-control { border-radius: 6px 0 0 6px; border-right: none; font-family: monospace; background: #f9f9fb; color: #555; }
.api-copy-btn { border: 1px solid #e5e7eb; background: #fff; color: #555; padding: 0 15px; border-radius: 0 6px 6px 0; cursor: pointer; font-size: 14px; transition: 0.2s; }
.api-copy-btn:hover { background: #f1f1f4; }
.api-help-text { font-size: 12px; color: #777; margin-top: 5px; }
/* Upgrade Alert Box */
.upgrade-box { border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 8px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 25px 0; flex-wrap: wrap; }
.upgrade-icon { width: 40px; height: 40px; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #3b82f6; font-size: 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.upgrade-content { flex: 1; }
.upgrade-title { font-size: 14px; font-weight: 700; color: #1e3a8a; margin-bottom: 5px; display: flex; align-items: center; gap: 10px;}
.badge-blue { background: #dbeafe; color: #1e40af; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.upgrade-desc { font-size: 12px; color: #3b82f6; }
.btn-black { background: #111; color: #fff; border: none; padding: 8px 15px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }
/* Integrations Table */
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 700px; }
.table th { text-align: left; padding: 15px 25px; font-size: 12px; font-weight: 600; color: #777; border-bottom: 1px dashed #e5e7eb; }
.table td { padding: 15px 25px; border-bottom: 1px dashed #e5e7eb; vertical-align: middle; font-size: 13px; }
.table tr:last-child td { border-bottom: none; }
.table .api-key-text { font-family: monospace; color: #555; display: inline-flex; align-items: center; gap: 8px; }
.table .api-key-text i { cursor: pointer; color: #ccc; }
.table .api-key-text i:hover { color: #3b82f6; }
.action-icon { color: #999; cursor: pointer; font-size: 14px; transition: 0.2s; border: none; background: none;}
.action-icon:hover { color: #dc2626; }
/* Custom Checkbox */
.custom-checkbox { position: relative; padding-left: 16px; cursor: pointer; font-size: 14px; user-select: none; display: inline-block; vertical-align: middle; height: 16px; }
.custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 16px; width: 16px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; }
.custom-checkbox:hover input ~ .checkmark { background-color: #f1f1f4; }
.custom-checkbox input:checked ~ .checkmark { background-color: #3b82f6; border-color: #3b82f6; }
.checkmark:after { content: ""; position: absolute; display: none; }
.custom-checkbox input:checked ~ .checkmark:after { display: block; }
.custom-checkbox .checkmark:after { left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Pagination Footer */
.pagination-wrap { padding: 15px 25px; border-top: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.per-page { font-size: 13px; color: #555; display: flex; align-items: center; gap: 10px; }
.pagination { display: flex; align-items: center; gap: 5px; list-style: none; padding: 0; margin: 0; }
.pagination li { display: inline-block; font-size: 13px; color: #777; }
.pagination a { padding: 6px 12px; border-radius: 4px; font-size: 13px; color: #555; text-decoration: none; border: 1px solid transparent; }
.pagination a:hover { background: #f1f1f4; }
.pagination a.active { background: #3b82f6; font-weight: 600; color: #fff; border: 1px solid #3b82f6; }
/* Info Cards & Sidebar */
.sidebar-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; margin-bottom: 20px; }
.sidebar-card-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 12px; }
.sidebar-card-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 20px; }
.btn-block { display: block; width: 100%; text-align: center; }
.info-icon { width: 35px; height: 35px; border-radius: 6px; background: #eff6ff; color: #3b82f6; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-size: 16px; }
.info-title { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 10px; line-height: 1.4; }
.info-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 15px; }
.info-link { font-size: 13px; color: #3b82f6; font-weight: 600; text-decoration: none; }
.info-link:hover { text-decoration: underline; }
/* Webhooks Form */
.webhook-grid { display: grid; grid-template-columns: 150px 1fr; gap: 15px; align-items: center; margin-bottom: 20px; }
@media(max-width: 600px) { .webhook-grid { grid-template-columns: 1fr; align-items: flex-start;} .webhook-grid .form-label { margin-bottom: 5px; } }
/* FAQ & Support */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
.support-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; padding: 25px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;}
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; max-width: 500px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from appearance.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-block; text-decoration: none;}
.btn-outline:hover { background: #f9f9f9; }
.btn-primary { background: #3b82f6; color: #fff; border: none; padding: 8px 15px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.3s; display: inline-block; text-decoration: none; }
.btn-primary:hover { background: #2563eb; }
/* Main Grid Layout */
.page-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-bottom: 30px; }
@media(max-width: 1024px) { .page-grid { grid-template-columns: 1fr; } }
/* Cards */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; overflow: hidden; }
.card-header-flex { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.card-header-title { font-size: 16px; font-weight: 700; color: #111; }
.card-header-right { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #777; font-weight: 500; }
.card-body { padding: 25px; }
.card-footer-right { padding: 20px 25px; border-top: 1px solid #f1f1f4; display: flex; justify-content: flex-end; }
/* Toggle Switch */
.toggle-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(16px); }
/* Theme Selector */
.theme-section-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 5px; }
.theme-section-desc { font-size: 13px; color: #777; margin-bottom: 20px; }
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
@media(max-width: 600px) { .theme-options { grid-template-columns: 1fr; } }
.theme-option { display: block; cursor: pointer; }
.theme-img { height: 130px; border-radius: 8px; margin-bottom: 12px; border: 2px solid transparent; transition: border-color 0.2s; position: relative; overflow: hidden; background-color: #f1f1f4; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; }
.theme-option input[type="radio"] { display: none; }
.theme-option input[type="radio"]:checked + .theme-img { border-color: #3b82f6; }
.theme-label { font-size: 13px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 8px; }
/* Fake UI mockups inside theme previews */
.dark-theme-img { background: #111827; }
.dark-theme-img::before { content: ""; position: absolute; top: 15px; left: 15px; bottom: 15px; width: 30px; background: #1f2937; border-radius: 4px; }
.dark-theme-img::after { content: ""; position: absolute; top: 15px; left: 55px; right: 15px; height: 40px; background: #1f2937; border-radius: 4px; }
.light-theme-img { background: #fff; border: 1px solid #e5e7eb; }
.light-theme-img::before { content: ""; position: absolute; top: 15px; left: 15px; bottom: 15px; width: 30px; background: #f3f4f6; border-radius: 4px; }
.light-theme-img::after { content: ""; position: absolute; top: 15px; left: 55px; right: 15px; height: 40px; background: #f3f4f6; border-radius: 4px; border: 1px solid #e5e7eb;}
.system-theme-img { background: linear-gradient(to right, #fff 50%, #111827 50%); border: 1px solid #e5e7eb; }
.system-theme-img::before { content: ""; position: absolute; top: 15px; left: 15px; bottom: 15px; width: 30px; background: #f3f4f6; border-radius: 4px; }
.system-theme-img::after { content: ""; position: absolute; top: 15px; left: 55px; right: 15px; height: 40px; background: #f3f4f6; border-radius: 4px; border: 1px solid #e5e7eb; z-index: 1;}
.radio-circle { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #ccc; display: inline-block; position: relative; }
.theme-option input[type="radio"]:checked ~ .theme-label .radio-circle { border-color: #3b82f6; }
.theme-option input[type="radio"]:checked ~ .theme-label .radio-circle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; background: #3b82f6; border-radius: 50%; }
.sidebar-transparent-row { display: flex; align-items: center; justify-content: space-between; padding-top: 25px; border-top: 1px dashed #e5e7eb; flex-wrap: wrap; gap: 15px; }
/* Branding Row Options */
.branding-row { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: start; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px dashed #e5e7eb; }
@media(max-width: 600px) { .branding-row { grid-template-columns: 1fr; gap: 10px; } }
.branding-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.b-label { font-size: 14px; font-weight: 600; color: #111; margin-bottom: 5px; }
.b-desc { font-size: 12px; color: #777; }
.upload-box { border: 1px dashed #ccc; border-radius: 8px; padding: 25px; text-align: center; background: #f9f9fb; cursor: pointer; }
.upload-box i { font-size: 24px; color: #3b82f6; margin-bottom: 10px; }
.upload-box p { margin: 0; font-size: 13px; color: #555; }
.upload-box span { font-size: 11px; color: #999; }
.color-input-wrap { display: flex; align-items: center; gap: 10px; border: 1px solid #e5e7eb; padding: 8px 12px; border-radius: 6px; background: #fff; width: 150px; }
.color-swatch { width: 20px; height: 20px; border-radius: 4px; background: #00ca55; }
.color-value { font-size: 13px; color: #555; font-family: monospace; }
/* Custom Checkbox */
.custom-checkbox { position: relative; padding-left: 22px; cursor: pointer; font-size: 13px; font-weight: 500; color: #333; user-select: none; display: flex; align-items: center; margin-bottom: 15px; }
.custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 16px; width: 16px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; }
.custom-checkbox:hover input ~ .checkmark { background-color: #f1f1f4; }
.custom-checkbox input:checked ~ .checkmark { background-color: #3b82f6; border-color: #3b82f6; }
.checkmark:after { content: ""; position: absolute; display: none; }
.custom-checkbox input:checked ~ .checkmark:after { display: block; }
.custom-checkbox .checkmark:after { left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check-desc { font-size: 12px; color: #777; display: block; margin-left: 22px; margin-top: -10px; margin-bottom: 15px; }
/* Accessibility List */
.acc-list { list-style: none; padding: 0; margin: 0; }
.acc-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }
.acc-item:last-child { border-bottom: none; }
.acc-left { display: flex; align-items: center; gap: 15px; }
.acc-icon { width: 40px; height: 40px; border-radius: 8px; background: #f9f9fb; border: 1px solid #f1f1f4; display: flex; align-items: center; justify-content: center; color: #555; font-size: 16px; }
.acc-info { display: flex; flex-direction: column; gap: 3px; }
.acc-title { font-size: 14px; font-weight: 600; color: #111; }
.acc-desc { font-size: 13px; color: #777; }
.form-control-sm { border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px 10px; font-size: 13px; outline: none; appearance: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 8px center; padding-right: 25px; background-color: #fff; }
/* Sidebar Cards */
.sidebar-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; margin-bottom: 20px; }
.sidebar-card-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.badge-pro { background: #eff6ff; color: #3b82f6; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
.sidebar-card-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 15px; }
.info-icon { width: 35px; height: 35px; border-radius: 6px; background: #eff6ff; color: #3b82f6; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-size: 16px; }
.info-title { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 10px; line-height: 1.4; }
.info-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 15px; }
.info-link { font-size: 13px; color: #3b82f6; font-weight: 600; text-decoration: none; }
.info-link:hover { text-decoration: underline; }
/* FAQ & Support */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
.support-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; padding: 25px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;}
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; max-width: 500px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from billing-basic.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-filled { border: none; background: #3b82f6; color: #fff; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-filled:hover { background: #2a6ae2; }
/* Billing Grid */
.billing-grid { display: grid; grid-template-columns: 2.2fr 1fr; gap: 25px; align-items: start; }
@media (max-width: 900px) { .billing-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 25px; }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 14px; font-weight: 600; color: #111; margin: 0; display:flex; align-items:center; gap: 10px; }
.card-title.large { font-size: 18px; font-weight: 700; }
.card-body { padding: 25px; }
/* Badge */
.badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge.green { background: #d1fae5; color: #059669; }
.badge.yellow { background: #fef3c7; color: #d97706; }
.badge.blue { background: #dbeafe; color: #2563eb; }
/* Stats Row */
.stats-row { display: flex; gap: 40px; margin: 20px 0; }
.stat-item { display: flex; flex-direction: column; gap: 4px; }
.stat-value { font-size: 18px; font-weight: 700; color: #111; }
.stat-label { font-size: 12px; color: #777; font-weight: 500; }
.progress-container { margin-top: 20px; }
.progress-label { display: flex; justify-content: space-between; font-size: 13px; color: #555; margin-bottom: 8px; font-weight: 600; }
.progress-bar { width: 100%; height: 6px; background: #e5e7eb; border-radius: 10px; overflow: hidden; }
.progress-fill { height: 100%; background: #3b82f6; border-radius: 10px; }
/* Lists & Tables */
.list-item { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px dashed #e5e7eb; }
.list-item:last-child { border-bottom: none; padding-bottom: 0; }
.item-icon { width: 40px; height: 30px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 4px; font-size: 16px; color: #111; }
.item-icon.visa { color: #1434CB; font-weight:bold; font-style:italic;}
.item-icon.mastercard { background: #dc2626; color: #fff;}
.item-icon.paypal { color: #003087; font-weight:bold; font-style:italic;}
.item-info { flex: 1; margin-left: 15px; }
.item-title { font-size: 13px; font-weight: 600; color: #111; margin: 0 0 4px 0; }
.item-desc { font-size: 12px; color: #777; margin: 0; }
.item-actions { display: flex; align-items: center; gap: 10px; }
.btn-icon { background: none; border: none; color: #999; cursor: pointer; font-size: 14px; transition: 0.2s; }
.btn-icon:hover { color: #3b82f6; }
/* Key Value grid */
.kv-grid { display: grid; row-gap: 15px; font-size: 13px; }
.kv-row { display: flex; align-items: flex-start; }
.kv-key { width: 150px; color: #777; font-weight: 500; }
.kv-value { flex: 1; color: #111; font-weight: 500; }
/* Table */
.modern-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.modern-table th { text-align: left; padding: 12px 15px; color: #777; font-weight: 600; border-bottom: 1px dashed #e5e7eb; }
.modern-table td { padding: 15px; border-bottom: 1px dashed #e5e7eb; color: #333; font-weight: 500; vertical-align: middle; }
.modern-table tbody tr:last-child td { border-bottom: none; }
.modern-table tbody tr:hover { background: #f8fafc; }
/* Right Column Info Box */
.info-box { padding: 30px; border-bottom: 1px dashed #e5e7eb; }
.info-box:last-child { border-bottom: none; }
.info-icon { width: 40px; height: 40px; background: #eff6ff; color: #3b82f6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 20px; }
.info-title { font-size: 14px; font-weight: 700; color: #111; margin: 0 0 10px 0; line-height: 1.4; }
.info-desc { font-size: 13px; color: #777; margin: 0 0 15px 0; line-height: 1.6; }
.info-link { font-size: 13px; font-weight: 600; color: #3b82f6; text-decoration: none; }
.info-link:hover { text-decoration: underline; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from billing-enterprise.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-filled { border: none; background: #3b82f6; color: #fff; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-filled:hover { background: #2a6ae2; }
.btn-filled.dark { background: #111; }
.btn-filled.dark:hover { background: #333; }
/* Grid Layout */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px;}
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 20px; overflow: hidden; }
.card-body { padding: 25px; }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 14px; font-weight: 600; color: #111; margin: 0; }
/* Badges */
.badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; display: inline-block; }
.badge.green { background: #d1fae5; color: #059669; }
.badge.yellow { background: #fef3c7; color: #d97706; }
.badge.red-light { background: #fee2e2; color: #dc2626; }
.badge.gray { background: #f3f4f6; color: #4b5563; }
/* Upgrage Banner Card */
.upgrade-banner { position: relative; background-image: radial-gradient(#e5e7eb 1px, transparent 1px); background-size: 20px 20px; }
.upgrade-banner .card-body { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.banner-icon { width: 44px; height: 44px; background: #eff6ff; color: #3b82f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; margin-right: 15px;}
.banner-content { flex: 1; }
.banner-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 5px 0; display:flex; align-items:center; gap:10px; }
.banner-desc { font-size: 13px; color: #777; margin: 0; max-width: 800px; }
.banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
/* Cloud Enterprise Card */
.cloud-card { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cloud-icon-box { width: 80px; height: 80px; border: 1px solid #e5e7eb; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fafafa; }
.cloud-icon-box svg { width: 40px; height: 40px; }
.cloud-icon-box span { font-size: 10px; font-weight: 600; color: #555; margin-top: 5px; }
.cloud-info { flex: 1; }
.cloud-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;}
.cloud-title { font-size: 18px; font-weight: 700; color: #111; margin: 0 0 5px 0; display: flex; align-items: center; gap: 10px; }
.cloud-desc { font-size: 13px; color: #777; margin: 0; }
.stats-row { display: flex; gap: 30px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-item { display: flex; flex-direction: column; gap: 2px; }
.stat-val { font-size: 13px; font-weight: 600; color: #111; }
.stat-lbl { font-size: 11px; color: #777; font-weight: 500; }
.usage-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 25px;}
.usage-progress { width: 300px; }
.progress-label { font-size: 12px; font-weight: 600; color: #555; margin-bottom: 8px; }
.progress-bar { width: 100%; height: 6px; background: #e5e7eb; border-radius: 10px; overflow: hidden; }
.progress-fill { height: 100%; background: #3b82f6; border-radius: 10px; }
.seats-info { text-align: right; }
.seats-info p { font-size: 12px; font-weight: 600; color: #333; margin: 0 0 5px 0; }
.avatar-group { display: flex; }
.avatar-group img { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; }
.avatar-group img:first-child { margin-left: 0; }
.avatar-more { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; background: #10b981; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
/* Half Cards Content */
.kv-table { width: 100%; font-size: 13px; border-collapse: collapse;}
.kv-table td { padding: 10px 0; }
.kv-table td:first-child { color: #777; width: 40%; }
.kv-table td:last-child { color: #111; font-weight: 500; }
.next-payment-box { display: flex; align-items: center; gap: 15px; background: #fafafa; border: 1px solid #f1f1f4; padding: 15px; border-radius: 8px; margin-bottom: 15px; justify-content: space-between; }
.np-left { display: flex; align-items: center; gap: 15px; }
.np-icon { width: 40px; height: 40px; border-radius: 50%; background: #eff6ff; color: #3b82f6; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.np-details .np-date { font-weight: 600; color: #111; font-size: 13px; margin-bottom: 2px; }
.np-details .np-label { font-size: 12px; color: #777; }
.check-icon { color: #3b82f6; font-size: 18px; }
/* Lists & Tables */
.list-item { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px dashed #e5e7eb; }
.list-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.item-icon { width: 44px; height: 32px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 4px; font-size: 20px; }
.item-info { flex: 1; margin-left: 15px; }
.item-title { font-size: 13px; font-weight: 600; color: #111; margin: 0 0 2px 0; }
.item-desc { font-size: 12px; color: #777; margin: 0; }
.item-actions { display: flex; align-items: center; gap: 10px; }
.btn-icon { background: none; border: none; color: #999; cursor: pointer; font-size: 14px; transition: 0.2s; }
.btn-icon:hover { color: #3b82f6; }
.modern-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.modern-table th { text-align: left; padding: 10px 10px; color: #777; font-weight: 600; border-bottom: 1px dashed #e5e7eb; }
.modern-table td { padding: 12px 10px; border-bottom: 1px dashed #e5e7eb; color: #333; font-weight: 500; }
.modern-table tbody tr:last-child td { border-bottom: none; }
.modern-table tbody tr:hover { background: #f9f9f9; }
/* Support Cards */
.support-card { display: flex; align-items: stretch; justify-content: space-between; }
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; }
.support-ill img { max-width: 100%; height: auto; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from billing-history.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
/* Card & Table */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; overflow: hidden; }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 16px; font-weight: 600; color: #111; margin: 0; }
.table-responsive { width: 100%; overflow-x: auto; }
.data-table { width: 100%; min-width: 800px; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 15px 25px; color: #777; font-weight: 600; border-bottom: 1px solid #f1f1f4; cursor: pointer; }
.data-table th i { font-size: 10px; margin-left: 5px; color: #ccc; }
.data-table td { padding: 15px 25px; border-bottom: 1px dashed #e5e7eb; color: #333; font-weight: 500; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #f9f9f9; }
/* Custom Checkbox */
.cb-container { display: block; position: relative; padding-left: 20px; cursor: pointer; font-size: 0; user-select: none; }
.cb-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 50%; transform: translateY(-50%); left: 0; height: 16px; width: 16px; background-color: #fff; border: 1px solid #d1d5db; border-radius: 4px; }
.cb-container:hover input ~ .checkmark { border-color: #3b82f6; }
.cb-container input:checked ~ .checkmark { background-color: #3b82f6; border-color: #3b82f6; }
.checkmark:after { content: ""; position: absolute; display: none; }
.cb-container input:checked ~ .checkmark:after { display: block; }
.cb-container .checkmark:after { left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Badges */
.badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; display: inline-block; }
.badge.green { background: #d1fae5; color: #059669; }
.badge.yellow { background: #fef3c7; color: #d97706; }
.badge.red-light { background: #fee2e2; color: #dc2626; }
/* Pagination Footer */
.table-footer { padding: 20px 25px; border-top: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #555; font-weight: 500; flex-wrap: wrap; gap: 15px;}
.table-footer select { padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 4px; outline: none; margin: 0 5px; cursor: pointer; background: #fff;}
.pagination { display: flex; align-items: center; gap: 5px; }
.pagination span { margin-right: 15px; }
.page-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; color: #555; text-decoration: none; transition: 0.2s; font-weight: 600;}
.page-btn:hover { background: #f1f1f4; }
.page-btn.active { background: #f1f1f4; color: #111; }
.page-btn.arrow { color: #999; }
.page-btn.arrow:hover { color: #111; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from billing-plans.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-filled { border: none; background: #3b82f6; color: #fff; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-filled:hover { background: #2a6ae2; }
/* Pricing Table */
.pricing-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; overflow-x: auto;}
.pricing-table { border-collapse: collapse; width: 100%; min-width: 900px; text-align: left; }
.pricing-table th, .pricing-table td { padding: 20px; border-bottom: 1px dashed #e5e7eb; border-right: 1px solid #f9f9f9; }
.pricing-table th:last-child, .pricing-table td:last-child { border-right: none; }
.pricing-table th { background: #fff; vertical-align: top; width: 20%; position: relative;}
.pricing-table th:first-child { width: 20%; vertical-align: middle; }
.pricing-table td { font-size: 13px; color: #555; font-weight: 500; }
.pricing-table td:first-child { font-weight: 600; color: #111; }
.plan-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.plan-desc { font-size: 12px; color: #777; margin: 0 0 15px 0; line-height: 1.4; min-height: 35px; }
.plan-price { font-size: 28px; font-weight: 700; color: #111; margin: 0 0 15px 0; display:flex; align-items:baseline; gap:5px;}
.plan-price span { font-size: 12px; font-weight: 500; color: #777; }
.plan-btn { display: block; width: 100%; text-align: center; }
/* Badge absolute */
.badge-top { position: absolute; top: -10px; left: 20px; background: #d1fae5; color: #059669; font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 4px; }
/* Switch for Annual Billing */
.billing-switch { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #111; }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #3b82f6; border-radius: 34px; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .4s; }
input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(18px); }
/* FAQ Card */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
/* Support Cards Grid */
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
@media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.card-body { padding: 25px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; }
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
.check-icon { color: #10b981; font-size: 16px; }
/* --- CSS from blogger-profile.html --- */
/* Base Profile CSS */
.profile-header { background: #fff; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }
.cover-pattern { height: 120px; background: radial-gradient(circle, #f8f9fa 10%, transparent 10%), radial-gradient(circle, #f8f9fa 10%, transparent 10%); background-size: 20px 20px; background-position: 0 0, 10px 10px; background-color: #fff; }
.profile-info { text-align: center; margin-top: -50px; padding: 0 20px; }
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid #fff; outline: 2px solid #00c853; margin-bottom: 10px; }
.profile-info h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.verified-icon { color: #3b82f6; font-size: 16px; }
.profile-meta { color: #777; font-size: 13px; display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding: 10px 20px; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #555; font-size: 14px; font-weight: 500; padding: 10px 0; border-bottom: 2px solid transparent; }
.nav-tabs a.active { color: #3b5cff; border-bottom: 2px solid #3b5cff; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 14px; border-radius: 8px; font-weight: 500; cursor: pointer; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon { background: #f4f6fa; border: 1px solid #eee; color: #555; border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* Grid Layout */
.profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
.card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.card-header h4 { font-size: 15px; font-weight: 600; color: #333; margin:0;}
.card-header a { font-size: 12px; color: #3b5cff; text-decoration: none; font-weight: 500; }
/* Left Col Details */
.stats-row { display: flex; justify-content: space-around; text-align: center; }
.stats-item h2 { font-size: 24px; font-weight: 600; color: #333; margin-bottom: 4px; }
.stats-item p { font-size: 12px; color: #777; margin: 0; }
.stats-divider { width: 1px; background: #eee; }
.about-text { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 15px; }
.about-list { list-style: none; padding: 0; font-size: 13px; color: #555; line-height: 1.6; }
.about-list li { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; }
.about-list li i { width: 16px; color: #888; text-align: center; font-size: 14px; }
.badges-container { display: flex; gap: 10px; }
.badge-col { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.b-blue { background: #e0e7ff; color: #3b82f6; } .b-yellow { background: #fef08a; color: #ca8a04; } .b-green { background: #dcfce7; color: #16a34a; } .b-purple { background: #f3e8ff; color: #a855f7; }
.collab-text { font-size: 13px; color: #555; margin-bottom: 15px; line-height: 1.5; }
.collab-link { font-size: 13px; color: #3b5cff; text-decoration: none; display: block; text-align: center;}
.skills-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tag { border: 1px solid #eee; background: #fafafa; padding: 5px 10px; border-radius: 6px; font-size: 12px; color: #555; font-weight: 500; }
/* Right Col Details */
.banner { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 30px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.banner-info h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: #111; }
.banner-info p { font-size: 13px; color: #555; max-width: 400px; margin-bottom: 15px; line-height: 1.6; }
.banner-img { width: 120px; }
.get-started { color: #3b5cff; text-decoration: none; font-size: 13px; font-weight: 500;}
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; overflow: hidden; }
.post-card { border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; }
.post-img { width: 100%; height: 140px; object-fit: cover; }
.post-body { padding: 15px; }
.post-tag { font-size: 11px; color: #3b82f6; font-weight: 600; margin-bottom: 8px; display: block; text-transform: uppercase; }
.post-body h4 { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 10px 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-meta { font-size: 12px; color: #999; display: flex; align-items: center; gap: 6px;}
.replies-list { display: flex; flex-direction: column; gap: 20px; }
.reply-item { border-left: 2px solid #e2e8f0; padding-left: 15px; }
.reply-meta { display: flex; align-items: center; font-size: 12px; color: #888; gap: 10px; margin-bottom: 6px; }
.reply-meta .upvotes { background: #f1f5f9; padding: 2px 8px; border-radius: 10px; color: #334155; font-weight: 500; display:flex; gap:4px; align-items:center;}
.reply-meta .upvotes i { font-size: 10px; color: #94a3b8; }
.reply-text { font-size: 13px; color: #334155; line-height: 1.6; margin: 0; }
.timeline { position: relative; padding-left: 20px; margin-top: 10px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: #eee; }
.timeline-item { position: relative; margin-bottom: 25px; }
.tl-icon { position: absolute; left: -20px; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; background: #ccc;}
.tl-primary { background: #3b82f6; }
.tl-success { background: #10b981; }
.tl-warning { background: #f59e0b; }
.tl-info { background: #06b6d4; }
.tl-content { padding-left: 15px; }
.tl-content p { font-size: 13px; color: #333; margin: 0 0 5px 0; }
.tl-content p a { color: #3b82f6; text-decoration: none; font-weight: 500; }
.tl-time { font-size: 11px; color: #999; }
.tl-box { border: 1px dashed #ccc; border-radius: 8px; padding: 20px; margin-top: 15px; text-align: center; background: #fdfdfd; max-width: 400px;}
.toggle-switch { width: 34px; height: 18px; background: #3b5cff; border-radius: 10px; position: relative; cursor: pointer; display: inline-block; vertical-align: middle; margin-left: 5px;}
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 18px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle-wrapper { display: flex; align-items: center; font-size: 12px; color: #555; }
@media(max-width:1000px){
.posts-grid { grid-template-columns: repeat(2, 1fr); }
.posts-grid .post-card:nth-child(3) { display: none; }
}
@media(max-width:900px){
.profile-grid { grid-template-columns: 1fr; }
.posts-grid { grid-template-columns: 1fr; }
.posts-grid .post-card:nth-child(3) { display: block; }
.banner { flex-direction: column; text-align: center; gap: 20px;}
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
}
/* --- CSS from campaigns-card.html --- */
/* Base Profile CSS */
.profile-header { position: relative; margin-bottom: 20px; overflow: hidden; background: transparent; }
.cover-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%233b5cff' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; }
.profile-info { text-align: center; padding: 20px 20px 0; position: relative; z-index: 1; margin-top: 20px; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar::after { content: ''; position: absolute; bottom: 8px; right: 8px; width: 15px; height: 15px; background: #10b981; border: 2px solid #fff; border-radius: 50%; }
.profile-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333; }
.verified-icon { color: #3b82f6; font-size: 16px; margin-left: 5px; }
.profile-meta { color: #777; font-size: 14px; display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; padding-bottom: 15px; margin-bottom: 15px; position: relative; z-index: 1; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #777; font-size: 14px; font-weight: 500; padding: 10px 0; position: relative; }
.nav-tabs a.active { color: #3b5cff; font-weight: 600; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s ease; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon-sq { background: #fff; border: 1px solid #eee; color: #555; border-radius: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.btn-icon-sq:hover { background: #f8f9fa; border-color: #ddd; }
/* Filter Bar */
.filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.filter-bar h4 { font-size: 16px; font-weight: 600; color: #333; margin: 0; }
.filter-actions { display: flex; gap: 8px; align-items: center; }
.btn-view { background: #fff; border: 1px solid #f1f1f4; width: 36px; height: 36px; border-radius: 6px; color: #777; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.02);}
.btn-view.active { background: #f8f9fa; color: #333; border-color: #ddd; }
/* Campaigns Grid */
.campaigns-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; }
.camp-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; position: relative; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.01); transition: all 0.3s; }
.camp-card:hover { border-color: #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.camp-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; }
.c-badge { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; }
.c-completed { background: #ecfdf5; color: #10b981; }
.c-running { background: #eff6ff; color: #3b82f6; }
.c-upcoming { background: #fff7ed; color: #f97316; }
.c-options { color: #999; cursor: pointer; padding: 5px; font-size: 14px; }
.c-options:hover { color: #555; }
.camp-body { text-align: center; flex: 1; padding: 15px 0 25px; }
.camp-icon { font-size: 45px; margin-bottom: 15px; display: inline-block; }
.icon-twitch { color: #6441a5; background: -webkit-linear-gradient(#6441a5, #9146ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.icon-insta { background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.icon-youtube { color: #ff0000; }
.icon-amazon { color: #000; }
.icon-mail { color: #ffe01b; text-shadow: 0 0 2px rgba(0,0,0,0.2); }
.icon-linkedin { color: #0077b5; }
.camp-title { font-size: 16px; font-weight: 600; color: #333; margin: 0 0 8px 0; }
.camp-desc { font-size: 12px; color: #777; margin: 0; }
.camp-stats { display: flex; justify-content: space-around; }
.c-stat { text-align: center; }
.c-stat h5 { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 4px 0; }
.c-stat p { font-size: 11px; color: #999; margin: 0; }
.camp-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #f1f1f4; border-radius: 0 0 12px 12px; }
.c-fill { height: 100%; background: #3b82f6; border-radius: 0 4px 4px 12px; transition: width 0.5s ease; }
.c-fill.full { border-radius: 0 0 12px 12px; background: #3b82f6; }
.show-more-link { display: block; text-align: center; color: #3b82f6; font-size: 14px; font-weight: 500; text-decoration: none; padding: 15px 0; border-top: 1px dashed #eee; margin-top: 10px; }
.show-more-link:hover { text-decoration: underline; }
@media(max-width: 991px) {
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.nav-tabs a.active::after { display: none; }
}
@media(max-width: 768px) {
.campaigns-grid { grid-template-columns: 1fr; }
}
/* --- CSS from campaigns-list.html --- */
/* Base Profile CSS */
.profile-header { position: relative; margin-bottom: 20px; overflow: hidden; background: transparent; }
.cover-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%233b5cff' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; }
.profile-info { text-align: center; padding: 20px 20px 0; position: relative; z-index: 1; margin-top: 20px; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar::after { content: ''; position: absolute; bottom: 8px; right: 8px; width: 15px; height: 15px; background: #10b981; border: 2px solid #fff; border-radius: 50%; }
.profile-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333; }
.verified-icon { color: #3b82f6; font-size: 16px; margin-left: 5px; }
.profile-meta { color: #777; font-size: 14px; display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; padding-bottom: 15px; margin-bottom: 15px; position: relative; z-index: 1; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #777; font-size: 14px; font-weight: 500; padding: 10px 0; position: relative; }
.nav-tabs a.active { color: #3b5cff; font-weight: 600; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s ease; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon-sq { background: #fff; border: 1px solid #eee; color: #555; border-radius: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.btn-icon-sq:hover { background: #f8f9fa; border-color: #ddd; }
/* Filter Bar */
.filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.filter-bar h4 { font-size: 16px; font-weight: 600; color: #333; margin: 0; }
.filter-actions { display: flex; gap: 8px; align-items: center; }
.btn-view { background: #fff; border: 1px solid #f1f1f4; width: 36px; height: 36px; border-radius: 6px; color: #777; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.02);}
.btn-view.active { background: #f8f9fa; color: #333; border-color: #ddd; }
/* Campaigns List */
.campaigns-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
.camp-row { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px 30px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 2px rgba(0,0,0,0.01); transition: all 0.3s; }
.camp-row:hover { border-color: #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.cr-left { display: flex; align-items: center; gap: 20px; flex: 1; }
.cr-icon { font-size: 36px; width: 45px; text-align: center; }
.cr-icon img { width: 45px; height: auto; display: block; }
.cr-text h4 { font-size: 15px; font-weight: 600; color: #333; margin: 0 0 5px 0; }
.cr-text p { font-size: 12px; color: #777; margin: 0; }
.cr-center { display: flex; gap: 50px; margin-right: 40px; }
.cr-stat { text-align: left; }
.cr-stat h5 { font-size: 13px; font-weight: 600; color: #333; margin: 0 0 4px 0; }
.cr-stat p { font-size: 11px; color: #999; margin: 0; }
.cr-right { display: flex; align-items: center; gap: 25px; }
.c-badge { font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 6px; text-transform: capitalize; }
.c-completed { background: #ecfdf5; color: #10b981; }
.c-running { background: #eff6ff; color: #3b82f6; }
.c-upcoming { background: #fff7ed; color: #f97316; }
.c-options { color: #999; cursor: pointer; padding: 5px; font-size: 14px; }
.c-options:hover { color: #555; }
/* Icon specific styles */
.icon-twitch { color: #6441a5; background: -webkit-linear-gradient(#6441a5, #9146ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.icon-insta { background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.icon-youtube { color: #ff0000; }
.icon-amazon { color: #000; }
.icon-linkedin { color: #0077b5; }
.show-more-link { display: block; text-align: center; color: #3b82f6; font-size: 14px; font-weight: 500; text-decoration: none; padding: 15px 0; border-top: 1px dashed #eee; margin-top: 10px; }
.show-more-link:hover { text-decoration: underline; }
@media(max-width: 991px) {
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.nav-tabs a.active::after { display: none; }
.camp-row { flex-wrap: wrap; gap: 20px; }
.cr-center { margin-right: 0; width: 100%; justify-content: space-between; order: 3; border-top: 1px dashed #f1f1f4; padding-top: 20px; }
.cr-left { min-width: 250px; }
}
@media(max-width: 600px) {
.cr-center { flex-direction: column; gap: 15px; }
.cr-right { order: 2; margin-left: auto; }
}
/* --- CSS from company-profile.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header & Actions */
.page-top-actions { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.header-btns { display: flex; gap: 10px; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-filled { border: none; background: #3b82f6; color: #fff; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-filled:hover { background: #2a6ae2; }
/* Layout Grid - 2/3 and 1/3 */
.profile-grid-company { display: grid; grid-template-columns: 2fr 1fr; gap: 25px; align-items: start; }
/* Cards & Lists */
.card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 1px 2px rgba(0,0,0,0.01); }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f9f9f9; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 15px; font-weight: 600; color: #111; margin: 0; }
.card-body { padding: 5px 25px 20px 25px; }
.list-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px dashed #f1f1f4; }
.list-row:last-child { border-bottom: none; }
.list-label { flex: 0 0 180px; color: #555; font-size: 13px; font-weight: 500; }
.list-content { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.list-text { color: #333; font-size: 13px; font-weight: 500; line-height: 1.5; }
.list-text.muted { color: #777; font-weight: 400; }
.edit-btn { background: #f4f6fa; border: none; color: #3b82f6; width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; }
.edit-btn:hover { background: #e0e6f6; }
.text-btn { color: #3b82f6; font-size: 13px; text-decoration: none; font-weight: 500; }
.text-btn:hover { text-decoration: underline; color: #2a6ae2; }
/* Utilities */
.badge-red { background: #fff5f8; color: #f1416c; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; display: inline-block; }
.badge-green { background: #e8fff3; color: #50cd89; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; display: inline-block; }
.toggle-switch-container { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; font-weight: 600; }
.toggle-switch { position: relative; width: 34px; height: 20px; background: #3b82f6; border-radius: 20px; cursor: pointer; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.social-logos { display: flex; gap: 8px; align-items: center; font-size: 16px; color: #555; }
.social-logos i.fa-google { color: #ea4335; }
.social-logos i.fa-facebook { color: #1877f2; }
.social-logos i.fa-apple { color: #000; }
/* Branding Layout */
.branding-row { padding: 25px 0; border-bottom: 1px dashed #f1f1f4; display: flex; align-items: flex-start; }
.branding-row:last-child { border-bottom: none; }
.branding-label { flex: 0 0 200px; }
.branding-label h4 { margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: #111; }
.branding-label p { margin: 0; font-size: 12px; color: #777; }
.branding-content { flex: 1; }
.logo-display { display: flex; align-items: center; gap: 20px; }
.logo-display img { height: 40px; }
.upload-box { border: 1px dashed #ccc; border-radius: 8px; padding: 15px; text-align: center; background: #fdfdfd; cursor: pointer; flex: 1; }
.upload-box i { font-size: 20px; color: #3b82f6; margin-bottom: 5px; }
.upload-box span { display: block; font-size: 12px; color: #555; font-weight: 500; }
.upload-box p { margin: 0; font-size: 10px; color: #999; }
.color-input { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 15px; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; }
.color-swatch { width: 16px; height: 16px; border-radius: 4px; background: #00b87c; }
.color-input input { border: none; outline: none; font-size: 13px; color: #333; font-weight: 500; }
.check-item { margin-bottom: 15px; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check-item input { margin-top: 2px; }
.check-item-text h5 { margin: 0 0 2px 0; font-size: 13px; color: #333; }
.check-item-text p { margin: 0; font-size: 11px; color: #777; }
/* Members Table */
.members-table { width: 100%; border-collapse: collapse; }
.members-table th { text-align: left; font-size: 12px; color: #999; font-weight: 500; padding: 15px 0; border-bottom: 1px solid #f1f1f4; }
.members-table td { padding: 12px 0; border-bottom: 1px dashed #f1f1f4; vertical-align: middle; }
.members-table tr:last-child td { border-bottom: none; }
.member-name { display: flex; align-items: center; gap: 12px; }
.member-name img { width: 36px; height: 36px; border-radius: 50%; }
.member-info h5 { font-size: 13px; font-weight: 600; color: #333; margin: 0 0 2px 0; }
.member-info span { font-size: 11px; color: #777; }
.member-role { font-size: 13px; color: #555; font-weight: 500; }
.member-joined { font-size: 13px; color: #555; font-weight: 500; }
/* Right Sidebar Guide Articles */
.guide-card { padding: 25px; border-bottom: 1px solid #f1f1f4; }
.guide-card:last-child { border-bottom: none; }
.guide-icon { width: 36px; height: 36px; border-radius: 50%; background: #f0f4ff; color: #3b82f6; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.guide-card h4 { font-size: 14px; font-weight: 600; color: #222; margin: 0 0 8px 0; line-height: 1.4; }
.guide-card p { font-size: 12px; color: #777; margin: 0 0 10px 0; line-height: 1.5; }
.guide-card a { font-size: 12px; color: #3b82f6; text-decoration: none; font-weight: 500; }
.guide-card a:hover { text-decoration: underline; }
h2 { font-family: 'Inter', sans-serif;}
@media(max-width: 1024px) {
.profile-grid-company { grid-template-columns: 1fr; }
}
/* --- CSS from creator-profile.html --- */
/* Base Profile CSS (reused) */
.profile-header { background: #fff; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }
.cover-pattern { height: 120px; background: radial-gradient(circle, #f8f9fa 10%, transparent 10%), radial-gradient(circle, #f8f9fa 10%, transparent 10%); background-size: 20px 20px; background-position: 0 0, 10px 10px; background-color: #fff; }
.profile-info { text-align: center; margin-top: -50px; padding: 0 20px; }
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid #fff; outline: 2px solid #00c853; margin-bottom: 10px; }
.profile-info h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.verified-icon { color: #3b82f6; font-size: 16px; }
.profile-meta { color: #777; font-size: 13px; display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding: 10px 20px; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #555; font-size: 14px; font-weight: 500; padding: 10px 0; border-bottom: 2px solid transparent; }
.nav-tabs a.active { color: #3b5cff; border-bottom: 2px solid #3b5cff; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; }
.btn-primary:hover { background: #2a41b5; }
.btn-secondary { background: #f4f6fa; border: 1px solid #eee; color: #333; padding: 8px 14px; border-radius: 8px; font-weight: 500;}
.btn-icon { background: #f4f6fa; border: 1px solid #eee; color: #555; border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
/* Grid Layout */
.profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
.card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.card-header h4 { font-size: 15px; font-weight: 600; color: #333; }
.card-header a { font-size: 12px; color: #3b5cff; text-decoration: none;}
/* Left Col Details */
.stats-row { display: flex; justify-content: space-around; text-align: center; }
.stats-item h2 { font-size: 24px; font-weight: 600; color: #333; margin-bottom: 4px; }
.stats-item p { font-size: 12px; color: #777; margin: 0; }
.stats-divider { width: 1px; background: #eee; }
.avatars-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;}
.avatars-group img { width: 35px; height: 35px; border-radius: 50%; }
.about-list { list-style: none; padding: 0; font-size: 13px; color: #555; line-height: 1.6;}
.about-list li { display: flex; align-items: center; margin-bottom: 8px; gap: 10px; }
.about-list li i { width: 15px; color: #888; text-align: center; }
.about-text { margin-bottom: 15px; font-size: 13px; color: #555; line-height: 1.6;}
.badges-container { display: flex; gap: 10px; }
.badge-col { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.b-blue { background: #e0e7ff; color: #3b82f6; } .b-yellow { background: #fef08a; color: #ca8a04; } .b-green { background: #dcfce7; color: #16a34a; } .b-purple { background: #f3e8ff; color: #a855f7; }
.skills-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tag { border: 1px solid #eee; background: #fafafa; padding: 5px 10px; border-radius: 6px; font-size: 12px; color: #555; font-weight: 500; }
/* Right Col Details */
.banner { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 30px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.02);}
.banner-info h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; color: #111; }
.banner-info p { font-size: 13px; color: #555; max-width: 450px; margin-bottom: 20px; line-height: 1.6; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13px; color: #555; margin-bottom: 20px;}
.check-grid i { color: #10b981; margin-right: 5px; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.gallery-card { border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; }
.gallery-card img.thumb { width: 100%; height: 180px; object-fit: cover; }
.gc-body { padding: 15px; }
.gc-body h4 { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 10px; }
.gc-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #777; }
.gc-meta .author { display: flex; align-items: center; gap: 8px; font-weight: 500; color: #444;}
.gc-meta .author img { width: 24px; height: 24px; border-radius: 50%; }
.gc-stats { display: flex; gap: 10px; }
.gc-stats i { color: #b0b0b0; }
.event-list { display: flex; flex-direction: column; gap: 15px; }
.event-item { display: flex; gap: 15px; align-items: center; padding-bottom: 15px; border-bottom: 1px dashed #eee; }
.event-item:last-child { border-bottom: none; padding-bottom: 0; }
.event-date { width: 50px; height: 55px; border: 1px solid #eee; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fdfdfd; flex-shrink: 0;}
.e-month { font-size: 10px; color: #9333ea; font-weight: 600; text-transform: uppercase;}
.e-day { font-size: 18px; font-weight: 600; color: #333; }
.event-img { width: 120px; height: 75px; border-radius: 8px; object-fit: cover; flex-shrink: 0;}
.event-info { display: flex; flex-direction: column; gap: 4px; }
.e-tag { font-size: 11px; color: #3b82f6; font-weight: 500; }
.e-title { font-size: 14px; font-weight: 600; color: #333; }
.e-desc { font-size: 12px; color: #777; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.timeline { position: relative; padding-left: 20px; margin-top: 10px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: #eee; }
.timeline-item { position: relative; margin-bottom: 25px; }
.tl-icon { position: absolute; left: -20px; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; background: #ccc;}
.tl-primary { background: #3b82f6; }
.tl-success { background: #10b981; }
.tl-warning { background: #f59e0b; }
.tl-info { background: #06b6d4; }
.tl-content { padding-left: 15px; }
.tl-content p { font-size: 13px; color: #333; margin: 0 0 5px 0; }
.tl-content p a { color: #3b82f6; text-decoration: none; font-weight: 500; }
.tl-time { font-size: 11px; color: #999; }
.tl-box { border: 1px dashed #ccc; border-radius: 8px; padding: 15px; margin-top: 10px; display: inline-block; text-align: center; background: #fdfdfd;}
@media(max-width:900px){
.profile-grid { grid-template-columns: 1fr; }
.gallery-grid { grid-template-columns: 1fr; }
.banner { flex-direction: column; text-align: center; }
.check-grid { text-align: left; }
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.event-item { flex-direction: column; align-items: flex-start; }
}
/* --- CSS from crm-profile.html --- */
/* Base Profile CSS */
.profile-header { background: #fff; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }
.cover-pattern { height: 120px; background: radial-gradient(circle, #f8f9fa 10%, transparent 10%), radial-gradient(circle, #f8f9fa 10%, transparent 10%); background-size: 20px 20px; background-position: 0 0, 10px 10px; background-color: #fff; }
.profile-info { text-align: center; margin-top: -50px; padding: 0 20px; }
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid #fff; outline: 2px solid #00c853; margin-bottom: 10px; }
.profile-info h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.verified-icon { color: #3b82f6; font-size: 16px; }
.profile-meta { color: #777; font-size: 13px; display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding: 10px 20px; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #555; font-size: 14px; font-weight: 500; padding: 10px 0; border-bottom: 2px solid transparent; }
.nav-tabs a.active { color: #3b5cff; border-bottom: 2px solid #3b5cff; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 14px; border-radius: 8px; font-weight: 500; cursor: pointer; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon { background: #f4f6fa; border: 1px solid #eee; color: #555; border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* Grid Layout */
.profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
.card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.card-header h4 { font-size: 15px; font-weight: 600; color: #333; margin:0;}
.card-header a { font-size: 12px; color: #3b5cff; text-decoration: none; font-weight: 500; }
.card-header i { color: #ccc; cursor: pointer; }
/* Left Col Details */
.info-list { list-style: none; padding: 0; margin: 0; font-size: 13px; color: #555; }
.info-list li { display: flex; margin-bottom: 15px; }
.info-list li .label { width: 100px; color: #888; flex-shrink: 0;}
.info-list li .value { color: #333; font-weight: 500;}
.status-badge { background: #dcfce7; color: #16a34a; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;}
.api-text { font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 15px; }
.api-text a { color: #3b5cff; text-decoration: none; }
.api-input-wrap { display: flex; border: 1px solid #eee; border-radius: 8px; padding: 10px 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; background: #fafafa; }
.api-input-wrap span { font-family: monospace; font-size: 13px; color: #333; }
.api-input-wrap i { color: #999; cursor: pointer; }
.api-help { font-size: 11px; color: #999; margin-bottom: 15px; display: block; }
.api-btn { background: #3b5cff; color: #fff; border: none; padding: 8px 16px; border-radius: 8px; font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;}
.api-check-link { display: block; text-align: center; color: #3b5cff; font-size: 13px; text-decoration: none; margin-top: 15px; font-weight: 500;}
.view-all-link { display: block; text-align: center; color: #3b5cff; font-size: 13px; text-decoration: none; margin-top: 15px; font-weight: 500;}
.skills-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tag { border: 1px solid #eee; background: #fafafa; padding: 5px 10px; border-radius: 6px; font-size: 12px; color: #555; font-weight: 500; }
/* Right Col Details */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; padding: 10px; color: #888; font-weight: 500; border-bottom: 1px solid #eee; }
.table td { padding: 12px 10px; border-bottom: 1px solid #eee; color: #333; font-weight: 500; }
.table td i { color: #ccc; cursor: pointer; float: right;}
.badge-ongoing { background: #e0e7ff; color: #3b5cff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-closed { background: #dcfce7; color: #16a34a; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-hold { background: #fef08a; color: #ca8a04; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-canceled { background: #fee2e2; color: #dc2626; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.toggle-switch { width: 34px; height: 18px; background: #3b5cff; border-radius: 10px; position: relative; cursor: pointer; display: inline-block; vertical-align: middle; margin-left: 5px;}
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 18px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle-wrapper { display: flex; align-items: center; font-size: 12px; color: #555; }
.timeline { position: relative; padding-left: 20px; margin-top: 10px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: #eee; }
.timeline-item { position: relative; margin-bottom: 25px; }
.tl-icon { position: absolute; left: -20px; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; background: #ccc;}
.tl-primary { background: #3b82f6; }
.tl-success { background: #10b981; }
.tl-warning { background: #f59e0b; }
.tl-info { background: #06b6d4; }
.tl-danger { background: #ef4444; }
.tl-content { padding-left: 15px; }
.tl-content p { font-size: 13px; color: #333; margin: 0 0 5px 0; }
.tl-content p a { color: #3b82f6; text-decoration: none; font-weight: 500; }
.tl-time { font-size: 11px; color: #999; margin-bottom: 10px;}
.tl-box { border: 1px solid #eee; border-radius: 8px; padding: 20px; margin-top: 5px; background: #fff;}
.tl-box-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;}
.tl-box-header-title { display: flex; gap: 10px; }
.tl-box-header-title i { font-size: 24px; color: #a855f7; }
.tl-box-header h5 { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 5px 0; }
.tl-box-header p { font-size: 12px; color: #777; margin: 0; }
.tl-box-header a { font-size: 12px; color: #3b5cff; text-decoration: none; font-weight: 500;}
.tl-box-meta { display: flex; align-items: center; gap: 20px; font-size: 12px; color: #555; }
.tl-code { font-family: monospace; color: #3b5cff; font-weight: 600; }
.progress-wrap { display: flex; align-items: center; gap: 8px; width: 150px; }
.progress-bar-thin { width: 100%; height: 4px; background: #eee; border-radius: 2px; overflow: hidden; }
.progress-fill-thin { height: 100%; background: #16a34a; width: 70%;}
.avatars-group { display: flex; }
.avatars-group img, .avatars-group span { width: 25px; height: 25px; border-radius: 50%; border: 2px solid #fff; margin-left: -5px; }
.avatars-group span { background: #3b82f6; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.campaign-box { border: 1px dashed #ccc; border-radius: 8px; padding: 20px; margin-top: 5px; text-align: center; background: #fdfdfd; max-width: 500px;}
.campaign-box h5 { font-size: 14px; font-weight: 600; margin-bottom: 5px;}
.campaign-box p { font-size: 12px; color: #555; margin: 0; }
.split-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contributor { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.contributor-left { display: flex; align-items: center; gap: 10px; }
.contributor-left img { width: 35px; height: 35px; border-radius: 50%; }
.contributor-left h5 { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.contributor-left p { font-size: 11px; color: #999; margin: 0; }
.invoice-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.invoice-left { display: flex; align-items: center; gap: 12px; }
.invoice-icon { background: #f1f5f9; width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 14px;}
.invoice-info h5 { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 2px; }
.invoice-info p { font-size: 11px; color: #999; margin: 0; }
.invoice-amount { font-size: 13px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 10px;}
.invoice-amount i { color: #ccc; cursor: pointer; }
@media(max-width:900px){
.profile-grid { grid-template-columns: 1fr; }
.split-col { grid-template-columns: 1fr; }
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.tl-box-header { flex-direction: column; gap: 10px; }
.tl-box-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* --- CSS from default-profile.html --- */
/* Custom Profile CSS */
.profile-header {
background: #fff;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
overflow: hidden;
}
.cover-pattern {
height: 120px;
background: radial-gradient(circle, #f8f9fa 10%, transparent 10%), radial-gradient(circle, #f8f9fa 10%, transparent 10%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-color: #fff;
}
.profile-info {
text-align: center;
margin-top: -50px;
padding: 0 20px;
}
.profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid #fff;
outline: 2px solid #00c853;
margin-bottom: 10px;
}
.profile-info h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
}
.verified-icon {
color: #3b82f6;
font-size: 16px;
}
.profile-meta {
color: #777;
font-size: 13px;
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
}
.profile-nav {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #eee;
padding: 10px 20px;
}
.nav-tabs {
display: flex;
gap: 20px;
}
.nav-tabs a {
text-decoration: none;
color: #555;
font-size: 14px;
font-weight: 500;
padding: 10px 0;
border-bottom: 2px solid transparent;
}
.nav-tabs a.active {
color: #3b5cff;
border-bottom: 2px solid #3b5cff;
}
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon { background: #f4f6fa; border: 1px solid #eee; color: #555; border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
/* Grid Layout */
.profile-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 20px;
}
.card {
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
margin-bottom: 20px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.card-header h4 { font-size: 15px; font-weight: 600; color: #333; }
.card-header i { color: #999; cursor: pointer; }
/* Left Col Details */
.badges-container {
display: flex;
gap: 10px;
}
.badge-col {
width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.b-blue { background: #e0e7ff; color: #4f46e5; }
.b-yellow { background: #fef08a; color: #ca8a04; }
.b-green { background: #dcfce7; color: #16a34a; }
.b-purple { background: #f3e8ff; color: #9333ea; }
.about-list { list-style: none; padding: 0; font-size: 13px; color: #555; }
.about-list li { display: flex; margin-bottom: 10px; }
.about-list li span:first-child { width: 100px; color: #888; }
.work-item { margin-bottom: 15px; display: flex; gap: 12px; }
.work-icon { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color:#fff;}
.w-1 { background: #2563eb; } .w-2 { background: #ea580c; } .w-3 { background: #16a34a; }
.work-info h5 { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 2px; }
.work-info p { font-size: 12px; color: #777; margin:0;}
.work-info span { font-size: 11px; color: #999; }
.open-to-work { color: #3b5cff; text-align: center; font-size: 13px; font-weight: 500; display: block; margin-top: 10px; text-decoration: none;}
.skills-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tag { border: 1px solid #eee; background: #fafafa; padding: 5px 10px; border-radius: 6px; font-size: 12px; color: #555; font-weight: 500; }
.upload-item { display: flex; gap: 12px; margin-bottom: 15px; align-items: center;}
.upload-icon { font-size: 24px; }
.i-red { color: #dc2626; } .i-blue { color: #2563eb; } .i-yellow { color: #ca8a04; }
.upload-info h5 { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 2px;}
.upload-info p { font-size: 11px; color: #999; margin:0;}
/* Right Col Details */
.banner { background: #eef3ff; border: 1px dashed #3b5cff; border-radius: 12px; padding: 25px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.banner-info h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: #111; }
.banner-info p { font-size: 13px; color: #555; max-width: 400px; margin-bottom: 15px; line-height: 1.5; }
.banner-img { width: 150px; height: auto; }
.chart-placeholder { width: 100%; height: 200px; background: url('data:image/svg+xml;utf8,') no-repeat center; background-size: cover; border-bottom: 1px solid #eee; }
.split-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contributor { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.contributor-left { display: flex; align-items: center; gap: 10px; }
.contributor-left img { width: 35px; height: 35px; border-radius: 50%; }
.contributor-left h5 { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.contributor-left p { font-size: 11px; color: #999; margin:0; }
.donut-chart-container { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 15px;}
.donut-chart { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient( #2563eb 0% 30%, #16a34a 30% 60%, #9333ea 60% 80%, #ca8a04 80% 90%, #dc2626 90% 100% ); position: relative; }
.donut-chart::after { content: ''; position: absolute; top: 20px; left: 20px; width: 80px; height: 80px; background: #fff; border-radius: 50%; }
.donut-legend { list-style: none; padding: 0; font-size: 12px; color: #555; }
.donut-legend li { display: flex; align-items: center; margin-bottom: 6px; }
.donut-legend li span { width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; display: inline-block;}
.dl-1 { background: #2563eb; } .dl-2 { background: #16a34a; } .dl-3 { background: #9333ea; } .dl-4 { background: #ca8a04; } .dl-5 { background: #dc2626; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; padding: 10px; color: #888; font-weight: 500; border-bottom: 1px solid #eee; }
.table td { padding: 12px 10px; border-bottom: 1px solid #eee; color: #333; }
.progress-bar { width: 100px; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: #3b5cff; }
.avatars-group { display: flex; }
.avatars-group img, .avatars-group span { width: 25px; height: 25px; border-radius: 50%; border: 2px solid #fff; margin-left: -5px; }
.avatars-group span { background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; }
@media(max-width:900px){
.profile-grid { grid-template-columns: 1fr; }
.split-col { grid-template-columns: 1fr; }
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
}
/* --- CSS from empty.html --- */
/* Base Profile CSS */
.profile-header { position: relative; margin-bottom: 20px; overflow: hidden; background: transparent; }
.cover-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%233b5cff' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; }
.profile-info { text-align: center; padding: 20px 20px 0; position: relative; z-index: 1; margin-top: 20px; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar::after { content: ''; position: absolute; bottom: 8px; right: 8px; width: 15px; height: 15px; background: #10b981; border: 2px solid #fff; border-radius: 50%; }
.profile-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333; }
.verified-icon { color: #3b82f6; font-size: 16px; margin-left: 5px; }
.profile-meta { color: #777; font-size: 14px; display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; padding-bottom: 15px; margin-bottom: 25px; position: relative; z-index: 1; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #777; font-size: 14px; font-weight: 500; padding: 10px 0; position: relative; }
.nav-tabs a.active { color: #3b5cff; font-weight: 600; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s ease; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon-sq { background: #fff; border: 1px solid #eee; color: #555; border-radius: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.btn-icon-sq:hover { background: #f8f9fa; border-color: #ddd; }
/* Empty State Container */
.empty-box { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 80px 20px; text-align: center; margin-bottom: 25px; box-shadow: 0 1px 3px rgba(0,0,0,0.01); }
.empty-icon { font-size: 80px; color: #d5d9e2; margin-bottom: 25px; display: inline-block; }
.empty-image { width: 150px; margin-bottom: 25px; opacity: 0.8; }
.empty-title { font-size: 18px; font-weight: 600; color: #333; margin: 0 0 10px 0; }
.empty-desc { font-size: 13px; color: #777; margin: 0; }
.empty-desc a { color: #333; font-weight: 600; text-decoration: none; }
.empty-desc a:hover { text-decoration: underline; color: #3b5cff; }
.check-templates-container { text-align: center; }
.check-templates-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 500; text-decoration: none; border-bottom: 1px dashed #3b82f6; padding-bottom: 2px; transition: all 0.2s; }
.check-templates-link:hover { color: #2a41b5; border-color: #2a41b5; }
@media(max-width: 991px) {
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.nav-tabs a.active::after { display: none; }
}
@media(max-width: 768px) {
.empty-box { padding: 50px 20px; }
}
/* --- CSS from feeds-profile.html --- */
/* Base Profile CSS */
.profile-header { background: #fff; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }
.cover-pattern { height: 120px; background: radial-gradient(circle, #f8f9fa 10%, transparent 10%), radial-gradient(circle, #f8f9fa 10%, transparent 10%); background-size: 20px 20px; background-position: 0 0, 10px 10px; background-color: #fff; }
.profile-info { text-align: center; margin-top: -50px; padding: 0 20px; }
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid #fff; outline: 2px solid #00c853; margin-bottom: 10px; }
.profile-info h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.verified-icon { color: #3b82f6; font-size: 16px; }
.profile-meta { color: #777; font-size: 13px; display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 20px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding: 10px 20px; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #555; font-size: 14px; font-weight: 500; padding: 10px 0; border-bottom: 2px solid transparent; }
.nav-tabs a.active { color: #3b5cff; border-bottom: 2px solid #3b5cff; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 14px; border-radius: 8px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon { background: #f4f6fa; border: 1px solid #eee; color: #555; border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* Grid Layout */
.profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
.card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.card-header h4 { font-size: 15px; font-weight: 600; color: #333; margin:0;}
/* Left Col Details */
.stats-row { display: flex; justify-content: space-around; text-align: center; }
.stats-item h2 { font-size: 20px; font-weight: 600; color: #333; margin: 0 0 4px 0; }
.stats-item p { font-size: 12px; color: #777; margin: 0; }
.stats-divider { width: 1px; background: #eee; }
.about-text { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 15px; }
.about-list { list-style: none; padding: 0; font-size: 13px; color: #555; line-height: 1.6; margin: 0;}
.about-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.about-list li i { width: 16px; color: #888; text-align: center; font-size: 14px; }
.collab-link { font-size: 13px; color: #3b5cff; text-decoration: none; display: block; text-align: center; margin-top: 15px;}
.skills-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tag { border: 1px solid #eee; background: #fafafa; padding: 5px 10px; border-radius: 6px; font-size: 12px; color: #555; font-weight: 500; }
/* Feeds Styles */
.feed-post { background: #fff; border-radius: 12px; border: 1px solid #eee; box-shadow: 0 1px 3px rgba(0,0,0,0.02); margin-bottom: 20px; padding: 20px; }
.feed-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
.feed-author { display: flex; align-items: center; gap: 12px; }
.feed-avatar { width: 40px; height: 40px; border-radius: 50%; }
.feed-avatar-icon { width: 40px; height: 40px; border-radius: 8px; background: #eef2ff; color:#3b5cff; display: flex; align-items: center; justify-content: center; font-size: 20px;}
.feed-author-info h4 { margin: 0 0 2px 0; font-size: 15px; font-weight: 600; color: #333; }
.feed-author-info p { margin: 0; font-size: 11px; color: #888; }
.feed-options { color: #ccc; cursor: pointer; }
.feed-text { font-size: 13px; color: #444; line-height: 1.6; margin-bottom: 15px; }
.feed-media-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 15px; border-radius: 12px; overflow: hidden; height: 300px;}
.feed-media-main { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.feed-media-side { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.feed-media-side img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.feed-restricted { background: #fdfdfd; border: 1px dashed #ddd; border-radius: 12px; padding: 40px; text-align: center; margin-bottom: 15px; }
.feed-restricted h4 { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 10px;}
.feed-restricted p { font-size: 12px; color: #777; margin-bottom: 20px;}
.feed-video-wrap { position: relative; margin-bottom: 15px; border-radius: 12px; overflow: hidden; }
.feed-video-thumb { width:100%; display:block;}
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ff0000; font-size: 40px; background: #fff; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.feed-actions { display: flex; gap: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px;}
.action-btn { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666; font-weight: 500; cursor: pointer; }
.action-btn i { color: #aaa; font-size: 14px;}
.action-btn.active { color: #3b82f6; background: #eef2ff; padding: 4px 10px; border-radius: 6px;}
.comments-section { padding-top: 5px; }
.comment { display: flex; gap: 12px; margin-bottom: 15px; }
.comment img { width: 32px; height: 32px; border-radius: 50%; }
.comment-content { flex-grow: 1; }
.comment-header { display: flex; justify-content: space-between; margin-bottom: 4px; align-items: baseline;}
.comment-author { font-size: 13px; font-weight: 600; color: #333; margin:0; }
.comment-time { font-size: 11px; color: #999; margin-left: 10px; font-weight: normal;}
.comment-reply-btn { font-size: 11px; color: #3b82f6; cursor: pointer; }
.comment-text { font-size: 13px; color: #555; margin: 0; line-height: 1.5; }
.comment-input-wrap { display: flex; gap: 12px; align-items: center; border-top: 1px solid #eee; padding-top: 15px; margin-top: 10px;}
.comment-input-wrap img { width: 32px; height: 32px; border-radius: 50%; }
.comment-input { flex-grow: 1; border: 1px solid #eee; background: #fafafa; border-radius: 20px; padding: 8px 15px; font-size: 13px; color: #333; outline: none;}
.connection-list { display: flex; flex-direction: column; gap: 12px; }
.connect-item { display: flex; justify-content: space-between; align-items: center; }
.connect-info { display: flex; align-items: center; gap: 10px; }
.connect-info img { width: 35px; height: 35px; border-radius: 50%; }
.connect-info h5 { font-size: 13px; font-weight: 600; margin: 0 0 2px 0; color: #333;}
.connect-info p { font-size: 11px; color: #888; margin: 0;}
.btn-connect-sm { background: #e0e7ff; color: #3b82f6; border: none; padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px;}
@media(max-width:900px){
.profile-grid { grid-template-columns: 1fr; }
.feed-media-grid { height: auto; grid-template-columns: 1fr; }
.feed-media-side { display: none; }
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
}
/* --- CSS from gamer-profile.html --- */
/* Base Profile CSS */
.profile-header { background: #fff; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }
.cover-pattern { height: 120px; background: radial-gradient(circle, #f8f9fa 10%, transparent 10%), radial-gradient(circle, #f8f9fa 10%, transparent 10%); background-size: 20px 20px; background-position: 0 0, 10px 10px; background-color: #fff; }
.profile-info { text-align: center; margin-top: -50px; padding: 0 20px; }
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid #fff; outline: 2px solid #00c853; margin-bottom: 10px; }
.profile-info h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.verified-icon { color: #3b82f6; font-size: 16px; }
.profile-meta { color: #777; font-size: 13px; display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 20px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding: 10px 20px; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #555; font-size: 14px; font-weight: 500; padding: 10px 0; border-bottom: 2px solid transparent; }
.nav-tabs a.active { color: #3b5cff; border-bottom: 2px solid #3b5cff; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 14px; border-radius: 8px; font-weight: 500; cursor: pointer; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon { background: #f4f6fa; border: 1px solid #eee; color: #555; border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-outline { background: transparent; border: 1px solid #ddd; padding: 8px 14px; border-radius: 8px; font-weight: 500; color: #333; cursor: pointer; display: flex; align-items: center; gap: 6px;}
/* Top Stats Bar */
.top-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 12px; padding: 25px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 20px; text-align: center; }
.top-stat-item { border-right: 1px solid #eee; display: flex; align-items: center; justify-content: center; gap: 20px;}
.top-stat-item:last-child { border-right: none; }
.top-stat-item i { font-size: 32px; }
.top-stat-text { text-align: left; }
.top-stat-text h2 { font-size: 22px; font-weight: 600; color: #333; margin: 0 0 5px 0; }
.top-stat-text p { font-size: 13px; color: #777; margin: 0; }
/* Grid Layout */
.profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
.card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.card-header h4 { font-size: 15px; font-weight: 600; color: #333; margin:0;}
.card-header a { font-size: 12px; color: #3b5cff; text-decoration: none; font-weight: 500; }
/* Left Col Details */
.game-icons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.game-icon { width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; background: #eee; }
.info-list { list-style: none; padding: 0; margin: 0; font-size: 13px; color: #555; }
.info-list li { display: flex; margin-bottom: 15px; }
.info-list li .label { width: 100px; color: #888; flex-shrink: 0;}
.info-list li .value { color: #333; font-weight: 500;}
.status-badge { background: #dcfce7; color: #16a34a; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;}
.about-desc { font-size: 13px; color: #555; line-height: 1.6; margin-top: 15px; }
.badges-container { display: flex; gap: 10px; }
.badge-col { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.b-blue { background: #e0e7ff; color: #3b82f6; } .b-yellow { background: #fef08a; color: #ca8a04; } .b-green { background: #dcfce7; color: #16a34a; } .b-purple { background: #f3e8ff; color: #a855f7; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px;}
.team-grid img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.view-all-link { display: block; text-align: center; color: #3b5cff; font-size: 13px; text-decoration: none; font-weight: 500;}
.network-list { list-style: none; padding: 0; margin: 0; }
.network-list li { margin-bottom: 12px; font-size: 13px; }
.network-list li a { color: #555; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.network-list li i { color: #888; width: 16px; text-align: center; }
/* Right Col Details */
.tourney-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; overflow: hidden; }
.tourney-card { border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; position: relative; display: flex; flex-direction: column; }
.tourney-img { width: 100%; height: 160px; object-fit: cover; }
.tourney-logo { width: 40px; height: 40px; border-radius: 8px; background: #fff; position: absolute; top: 140px; left: 15px; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800;}
.tourney-body { padding: 30px 15px 15px 15px; }
.tourney-body h4 { font-size: 15px; font-weight: 600; margin: 0 0 5px 0; color: #333; }
.tourney-date { font-size: 11px; color: #888; margin-bottom: 15px; }
.tourney-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.t-tag { background: #f1f5f9; color: #475569; padding: 4px 8px; font-size: 10px; font-weight: 600; border-radius: 4px; border: 1px solid #e2e8f0;}
.tourney-footer { display: flex; justify-content: space-between; align-items: center; }
.pb-wrap { flex-grow: 1; margin-right: 15px; }
.pb-text { display: flex; justify-content: space-between; font-size: 10px; color: #888; margin-bottom: 4px; }
.progress-bar { width: 100%; height: 4px; background: #eee; border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: #3b5cff; }
.tourney-footer a { font-size: 12px; color: #3b5cff; text-decoration: none; font-weight: 600; }
.playing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; overflow: hidden; }
.playing-card { border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; }
.playing-img { width: 100%; height: 260px; object-fit: cover; }
.playing-body { padding: 15px; }
.playing-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.playing-logo { width: 30px; height: 30px; border-radius: 6px; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px;}
.playing-titles h4 { font-size: 14px; font-weight: 600; margin: 0 0 2px 0; color: #333; }
.playing-titles p { font-size: 10px; color: #888; margin: 0; }
.playing-stats { display: flex; justify-content: space-between; text-align: center; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px;}
.play-stat-item h5 { font-size: 14px; font-weight: 600; margin: 0 0 2px 0; color: #333;}
.play-stat-item p { font-size: 10px; color: #888; margin: 0;}
.playing-footer { display: flex; justify-content: space-between; align-items: center; }
.avatars-group { display: flex; }
.avatars-group img, .avatars-group span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; margin-left: -5px; }
.avatars-group span { background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; }
.rank-badge { background: #fef08a; color: #ca8a04; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
/* Timeline identical to CRM/Blogger */
.toggle-switch { width: 34px; height: 18px; background: #3b5cff; border-radius: 10px; position: relative; cursor: pointer; display: inline-block; vertical-align: middle; margin-left: 5px;}
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 18px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle-wrapper { display: flex; align-items: center; font-size: 12px; color: #555; }
.timeline { position: relative; padding-left: 20px; margin-top: 10px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: #eee; }
.timeline-item { position: relative; margin-bottom: 25px; }
.tl-icon { position: absolute; left: -20px; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; background: #ccc;}
.tl-primary { background: #3b82f6; }
.tl-success { background: #10b981; }
.tl-info { background: #06b6d4; }
.tl-content { padding-left: 15px; }
.tl-content p { font-size: 13px; color: #333; margin: 0 0 5px 0; }
.tl-content p a { color: #3b82f6; text-decoration: none; font-weight: 500; }
.tl-time { font-size: 11px; color: #999; margin-bottom: 10px;}
.tl-box { border: 1px solid #eee; border-radius: 8px; padding: 20px; margin-top: 5px; background: #fff;}
.tl-box-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;}
.tl-box-header-title { display: flex; gap: 10px; }
.tl-box-header-title i { font-size: 24px; color: #a855f7; }
.tl-box-header h5 { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 5px 0; }
.tl-box-header p { font-size: 12px; color: #777; margin: 0; }
.tl-box-header a { font-size: 12px; color: #3b5cff; text-decoration: none; font-weight: 500;}
.tl-box-meta { display: flex; align-items: center; gap: 20px; font-size: 12px; color: #555; }
.tl-code { font-family: monospace; color: #3b5cff; font-weight: 600; }
.progress-wrap { display: flex; align-items: center; gap: 8px; width: 150px; }
.progress-bar-thin { width: 100%; height: 4px; background: #eee; border-radius: 2px; overflow: hidden; }
.progress-fill-thin { height: 100%; background: #16a34a; width: 70%;}
.campaign-box { border: 1px dashed #ccc; border-radius: 8px; padding: 20px; margin-top: 5px; text-align: center; background: #fdfdfd; max-width: 500px;}
.campaign-box h5 { font-size: 14px; font-weight: 600; margin-bottom: 5px;}
.campaign-box p { font-size: 12px; color: #555; margin: 0; }
@media(max-width:1000px){
.tourney-grid { grid-template-columns: repeat(2, 1fr); }
.playing-grid { grid-template-columns: repeat(2, 1fr); }
.tourney-grid .tourney-card:nth-child(3) { display: none; }
.playing-grid .playing-card:nth-child(3) { display: none; }
}
@media(max-width:900px){
.profile-grid { grid-template-columns: 1fr; }
.top-stats-bar { grid-template-columns: 1fr 1fr; gap: 20px; }
.top-stat-item { border: none; justify-content: flex-start; }
.tourney-grid { grid-template-columns: 1fr; }
.playing-grid { grid-template-columns: 1fr; }
.tourney-grid .tourney-card:nth-child(3) { display: flex; }
.playing-grid .playing-card:nth-child(3) { display: block; }
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.tl-box-header { flex-direction: column; gap: 10px; }
.tl-box-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* --- CSS from get-started.html --- */
/* Account Settings Header Navigation */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-header { margin-bottom: 30px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 8px 0; }
.page-meta { font-size: 13px; color: #111; font-weight: 600; }
.page-meta span { color: #555; font-weight: 400; margin-left: 5px; }
.page-meta a { color: #3b82f6; text-decoration: none; margin-left: 5px; font-weight: 500; border-bottom: 1px dashed #3b82f6; padding-bottom: 1px; }
.page-meta a:hover { color: #2a41b5; border-color: #2a41b5; }
.page-meta .separator { color: #999; margin: 0 5px; }
/* Grid Cards */
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.setting-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px 25px 30px 25px; position: relative; display: flex; flex-direction: column; transition: border-color 0.2s, box-shadow 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.01); text-decoration: none; }
.setting-card:hover { border-color: #e5e7eb; box-shadow: 0 3px 10px rgba(0,0,0,0.03); }
.setting-icon { color: #3b82f6; font-size: 22px; margin-bottom: 20px; opacity: 0.9; }
.setting-more { position: absolute; top: 20px; right: 20px; color: #a1a5b7; font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; z-index: 2; transition: color 0.2s; }
.setting-more:hover { color: #333; }
.setting-title { font-size: 15px; font-weight: 600; color: #222; margin: 0 0 10px 0; }
.setting-desc { font-size: 13px; color: #7e8299; line-height: 1.5; margin: 0; }
.more-options-container { text-align: center; padding-bottom: 50px; }
.more-options-link { color: #3b82f6; font-size: 13px; font-weight: 500; text-decoration: none; border-bottom: 1px dashed #3b82f6; padding-bottom: 2px; display: inline-block; transition: all 0.2s; }
.more-options-link:hover { color: #2a41b5; border-color: #2a41b5; }
@media(max-width: 991px) {
.settings-grid { grid-template-columns: repeat(2, 1fr); }
.account-nav { padding-bottom: 0px; margin-bottom: 20px; }
}
@media(max-width: 768px) {
.settings-grid { grid-template-columns: 1fr; }
}
/* --- CSS from import-members.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-primary { background: #3b82f6; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.3s; display: inline-block; text-decoration: none; }
.btn-primary:hover { background: #2563eb; }
/* Import Grid */
.import-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-bottom: 30px; }
@media(max-width: 900px) { .import-grid { grid-template-columns: 1fr; } }
/* Form Card */
.form-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 30px; }
.form-card-title { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 25px; }
.checkbox-group { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.checkbox-group input[type="checkbox"] { margin-top: 4px; width: 16px; height: 16px; accent-color: #3b82f6; cursor: pointer; }
.checkbox-content .title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 5px; }
.checkbox-content .desc { font-size: 13px; color: #777; line-height: 1.5; }
.file-upload-sec { margin: 25px 0; }
.file-btn { background: #3b82f6; color: #fff; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; border: none; }
.file-text { font-size: 13px; color: #555; margin-left: 10px; }
.file-hint { font-size: 13px; color: #777; margin-top: 10px; display: block; }
.custom-msg-sec { margin-bottom: 20px; }
.custom-msg-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 10px; }
.custom-msg-sec textarea { width: 100%; border: 1px solid #e5e7eb; border-radius: 6px; padding: 15px; font-size: 13px; outline: none; min-height: 100px; resize: vertical; box-sizing: border-box; font-family: inherit;}
.custom-msg-sec textarea:focus { border-color: #3b82f6; }
.warning-text { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 30px; }
.warning-text span { color: #dc2626; font-weight: 600; }
/* Info Cards */
.info-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; margin-bottom: 20px; }
.info-icon { width: 35px; height: 35px; border-radius: 6px; background: #eff6ff; color: #3b82f6; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-size: 16px; }
.info-title { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 10px; line-height: 1.4; }
.info-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 15px; }
.info-link { font-size: 13px; color: #3b82f6; font-weight: 600; text-decoration: none; }
.info-link:hover { text-decoration: underline; }
/* FAQ & Support */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
@media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.card-body { padding: 25px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; }
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from integrations.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-primary { background: #3b82f6; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.3s; display: inline-block; text-decoration: none; }
.btn-primary:hover { background: #2563eb; }
/* Integrations Grid */
.int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
@media(max-width: 900px) { .int-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 600px) { .int-grid { grid-template-columns: 1fr; } }
.int-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; background: #fff; display: flex; flex-direction: column; }
.int-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
.int-logo { width: 40px; height: 40px; object-fit: contain; }
.int-link-icon { color: #ccc; font-size: 14px; cursor: pointer; }
.int-link-icon:hover { color: #3b82f6; }
.int-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 8px; }
.int-desc { font-size: 13px; color: #777; line-height: 1.5; flex-grow: 1; margin-bottom: 25px; }
.int-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #e5e7eb; padding-top: 15px; }
.btn-connect { border: 1px solid #e5e7eb; background: #fff; color: #555; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: 0.2s; }
.btn-connect:hover { background: #f9f9f9; }
/* Toggle Switch */
.toggle-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e7eb; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(16px); }
/* Add New Block */
.add-int-card { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; padding: 40px 20px; text-align: center; margin-bottom: 30px; }
.add-int-title { font-size: 18px; font-weight: 700; color: #111; margin-bottom: 10px; }
.add-int-desc { font-size: 13px; color: #777; max-width: 500px; margin: 0 auto 20px auto; line-height: 1.5; }
/* FAQ & Support */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
@media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.card-body { padding: 25px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; }
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from invite-a-friend.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-block; text-decoration: none;}
.btn-outline:hover { background: #f9f9f9; }
.btn-primary { background: #3b82f6; color: #fff; border: none; padding: 8px 20px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.3s; display: inline-block; text-decoration: none; }
.btn-primary:hover { background: #2563eb; }
/* Main Grid Layout */
.page-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-bottom: 30px; }
@media(max-width: 1024px) { .page-grid { grid-template-columns: 1fr; } }
/* Cards */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; overflow: hidden; }
.card-header-flex { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.card-header-title { font-size: 16px; font-weight: 700; color: #111; }
.card-header-right { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #777; font-weight: 500; }
.card-body { padding: 25px; }
.card-footer-center { padding: 20px 25px; border-top: 1px solid #f1f1f4; display: flex; justify-content: center; }
/* Form Elements */
.form-group { display: grid; grid-template-columns: 80px 1fr; gap: 15px; align-items: center; margin-bottom: 20px; }
@media(max-width: 600px) { .form-group { grid-template-columns: 1fr; gap: 5px; align-items: start;} }
.form-label { font-size: 13px; font-weight: 600; color: #111; }
.form-control { width: 100%; border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 15px; font-size: 13px; outline: none; background: #fff; transition: border-color 0.2s; }
.form-control:focus { border-color: #3b82f6; }
select.form-control { appearance: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 10px center; padding-right: 35px;}
/* Link Input Group */
.link-input-group { display: flex; align-items: stretch; margin-bottom: 5px; }
.link-input-group .form-control { border-radius: 6px 0 0 6px; border-right: none; background: #f9f9fb; color: #555; }
.link-copy-btn { border: 1px solid #e5e7eb; background: #fff; color: #555; padding: 0 15px; border-radius: 0 6px 6px 0; cursor: pointer; font-size: 14px; transition: 0.2s; }
.link-copy-btn:hover { background: #f1f1f4; }
.link-help-text { font-size: 12px; color: #777; margin-bottom: 20px; display: block; }
/* Toggle Switch */
.toggle-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(16px); }
/* Table Elements */
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 600px; }
.table th { text-align: left; padding: 15px 25px; font-size: 12px; font-weight: 600; color: #777; border-bottom: 1px dashed #e5e7eb; }
.table td { padding: 15px 25px; border-bottom: 1px dashed #e5e7eb; vertical-align: middle; font-size: 13px; }
.table tr:last-child td { border-bottom: none; }
.search-input { border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 12px 8px 35px; font-size: 13px; outline: none; width: 180px; background: url('data:image/svg+xml;utf8,') no-repeat 12px center; }
.search-input:focus { border-color: #3b82f6; }
.user-info { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.user-name { font-size: 14px; font-weight: 600; color: #111; display: block; }
.user-role { font-size: 12px; color: #777; }
.location { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #333; }
.location img { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
.status-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: capitalize;}
.status-active { background: #e0f8e9; color: #16a34a; }
.status-missing { background: #fef3c7; color: #d97706; }
.status-neutral { background: #fee2e2; color: #dc2626; }
.activity { font-size: 13px; color: #555; }
.action-btn { background: none; border: none; color: #999; cursor: pointer; padding: 5px; }
/* Custom Checkbox */
.custom-checkbox { position: relative; padding-left: 16px; cursor: pointer; font-size: 14px; user-select: none; display: inline-block; vertical-align: middle; height: 16px; }
.custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 16px; width: 16px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; }
.custom-checkbox:hover input ~ .checkmark { background-color: #f1f1f4; }
.custom-checkbox input:checked ~ .checkmark { background-color: #3b82f6; border-color: #3b82f6; }
.checkmark:after { content: ""; position: absolute; display: none; }
.custom-checkbox input:checked ~ .checkmark:after { display: block; }
.custom-checkbox .checkmark:after { left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Pagination Footer */
.pagination-wrap { padding: 15px 25px; border-top: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.per-page { font-size: 13px; color: #555; display: flex; align-items: center; gap: 10px; }
.pagination { display: flex; align-items: center; gap: 5px; list-style: none; padding: 0; margin: 0; }
.pagination li { display: inline-block; font-size: 13px; color: #777; }
.pagination a { padding: 6px 12px; border-radius: 4px; font-size: 13px; color: #555; text-decoration: none; border: 1px solid transparent; }
.pagination a:hover { background: #f1f1f4; }
.pagination a.active { background: #3b82f6; font-weight: 600; color: #fff; border: 1px solid #3b82f6; }
/* Sidebar Info Cards */
.info-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; margin-bottom: 20px; }
.info-icon { width: 35px; height: 35px; border-radius: 6px; background: #eff6ff; color: #3b82f6; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-size: 16px; }
.info-title { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 10px; line-height: 1.4; }
.info-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 15px; }
.info-link { font-size: 13px; color: #3b82f6; font-weight: 600; text-decoration: none; }
.info-link:hover { text-decoration: underline; }
/* Support Cards Grid */
.support-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; padding: 25px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;}
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; max-width: 500px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from members-starter.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-primary { background: #3b82f6; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.3s; display: inline-block; text-decoration: none; }
.btn-primary:hover { background: #2563eb; }
/* Empty state starter block */
.starter-block { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; padding: 60px 20px; text-align: center; }
.starter-ill { width: 160px; height: 160px; border-radius: 50%; background: #f8f9fa; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.starter-title { font-size: 18px; font-weight: 700; color: #111; margin-bottom: 10px; line-height: 1.3; }
.starter-desc { font-size: 13px; color: #777; max-width: 500px; margin: 0 auto 25px auto; line-height: 1.5; }
/* FAQ Card */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
/* Support Cards Grid */
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
@media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.card-body { padding: 25px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; }
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from modal-profile.html --- */
/* Base Profile CSS */
body.modal-open { overflow: hidden; /* Prevent background scroll when modal is open */ }
.modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 2000;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 40px 20px;
overflow-y: auto;
}
.modal-container {
background: #f8f9fa;
width: 100%;
max-width: 1000px;
border-radius: 12px;
position: relative;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
margin: auto;
}
.btn-close {
position: absolute;
top: 15px; right: 15px;
background: #fff;
border: none;
width: 32px; height: 32px;
border-radius: 8px;
font-size: 14px;
color: #555;
cursor: pointer;
z-index: 10;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.modal-header-map {
height: 250px;
background: #e2e8f0 url('https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1200&q=80') center/cover;
border-radius: 12px 12px 0 0;
position: relative;
}
.modal-header-map::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.9));
border-radius: 12px 12px 0 0;
}
.header-profile-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
padding: 20px;
transform: translateY(20%);
}
.header-profile-info .avatar-wrapper {
width: 90px; height: 90px;
border-radius: 50%;
border: 4px solid #fff;
background: #fff;
margin: 0 auto 10px;
position: relative;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.header-profile-info .avatar-wrapper img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 50%;
}
.header-profile-info h3 { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 5px; }
.verified-icon { color: #3b82f6; font-size: 14px; margin-left: 4px; }
.header-meta { font-size: 12px; color: #555; display: flex; justify-content: center; gap: 15px; margin-bottom: 15px; }
.header-actions { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-icon { background: #fff; border: 1px solid #ddd; width: 34px; height: 34px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #555; cursor: pointer; }
/* Modal Body */
.modal-body {
padding: 60px 30px 40px;
}
.m-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 25px;
}
/* Cards */
.card {
background: #fff;
border: 1px solid #eee;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.card-header h4 { font-size: 15px; font-weight: 600; color: #333; margin: 0; }
.card-header .fa-ellipsis-v { color: #ccc; cursor: pointer; }
/* Badges */
.badges-container {
display: flex;
justify-content: space-between;
gap: 10px;
}
.badge-item {
width: 45px; height: 45px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
}
.b-blue { background: #eff6ff; color: #3b82f6; }
.b-yellow { background: #fefce8; color: #eab308; }
.b-green { background: #f0fdf4; color: #22c55e; }
.b-purple { background: #faf5ff; color: #a855f7; }
/* About List */
.about-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.about-list li { display: flex; margin-bottom: 12px; }
.about-list li .label { width: 90px; color: #777; }
.about-list li .value { color: #333; font-weight: 500; }
/* Experience */
.exp-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.exp-item:last-child { margin-bottom: 10px; }
.exp-icon {
width: 35px; height: 35px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 16px; flex-shrink: 0;
}
.ei-1 { background: #3b82f6; color: #fff; }
.ei-2 { background: #ef4444; color: #fff; }
.ei-3 { background: #16a34a; color: #fff; }
.exp-info h5 { font-size: 13px; font-weight: 600; color: #333; margin: 0 0 2px 0; }
.exp-info .role { font-size: 13px; color: #555; margin: 0 0 4px 0; font-weight: 500; }
.exp-info .date { font-size: 11px; color: #999; margin: 0; }
.exp-divider { font-size: 12px; color: #888; margin: 15px 0; font-weight: 500; }
.btn-open-work {
display: block; width: 100%; text-align: center;
background: transparent; color: #3b82f6;
border: none; border-top: 1px dashed #eee;
padding-top: 15px; margin-top: 5px;
font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none;
}
/* Right side grid */
.right-grid {
display: flex;
flex-direction: column;
}
.top-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
/* Contributors */
.contributor-item {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 15px;
}
.contributor-item:last-child { margin-bottom: 0; }
.cont-left { display: flex; align-items: center; gap: 12px; }
.cont-left img { width: 36px; height: 36px; border-radius: 50%; }
.cont-name { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 2px; }
.cont-conn { font-size: 11px; color: #888; }
.btn-add { background: #eef3ff; color: #3b82f6; border: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; }
.btn-added { background: #3b82f6; color: #fff; border: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.bottom-link {
display: block; text-align: center; color: #3b82f6; font-size: 13px; text-decoration: none; border-top: 1px dashed #eee; padding-top: 15px; margin-top: 20px; font-weight: 500;
}
/* Chart */
.donut-chart-container { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 20px;}
.donut-chart { width: 140px; height: 140px; border-radius: 50%; background: conic-gradient( #3b82f6 0% 20%, #ef4444 20% 45%, #10b981 45% 75%, #a855f7 75% 90%, #eab308 90% 100% ); position: relative; }
.donut-chart::after { content: ''; position: absolute; top: 30px; left: 30px; width: 80px; height: 80px; background: #fff; border-radius: 50%; }
.donut-legend { list-style: none; padding: 0; font-size: 12px; color: #555; }
.donut-legend li { display: flex; align-items: center; margin-bottom: 12px; }
.donut-legend li span { width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; display: inline-block;}
.dl-1 { background: #3b82f6; } .dl-2 { background: #ef4444; } .dl-3 { background: #10b981; } .dl-4 { background: #a855f7; } .dl-5 { background: #eab308; }
/* Table */
.projects-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.projects-table th { text-align: left; padding: 12px; color: #888; font-weight: 500; border-bottom: 1px solid #f1f1f4; }
.projects-table td { padding: 15px 12px; border-bottom: 1px solid #f1f1f4; color: #333; font-weight: 600; vertical-align: middle; }
.progress-bar-wrap { width: 100px; height: 4px; background: #eee; border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle;}
.progress-fill { height: 100%; background: #3b82f6; }
.avatars-group { display: flex; align-items: center; }
.avatars-group img, .avatars-group span.ag-more { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; object-fit: cover; }
.avatars-group img:first-child { margin-left: 0; }
.avatars-group span.ag-more { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; background: #10b981; }
.avatars-group span.ag-more.bg-red { background: #ef4444; }
.avatars-group span.ag-more.bg-blue { background: #3b82f6; }
@media(max-width: 991px) {
.m-grid { grid-template-columns: 1fr; }
.top-row { grid-template-columns: 1fr; }
.modal-overlay { padding: 20px 10px; }
}
/* --- CSS from network.html --- */
/* Base Profile CSS */
.profile-header { position: relative; margin-bottom: 20px; overflow: hidden; background: transparent; }
.cover-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%233b5cff' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; }
.profile-info { text-align: center; padding: 20px 20px 0; position: relative; z-index: 1; margin-top: 20px; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar::after { content: ''; position: absolute; bottom: 8px; right: 8px; width: 15px; height: 15px; background: #10b981; border: 2px solid #fff; border-radius: 50%; }
.profile-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333; }
.verified-icon { color: #3b82f6; font-size: 16px; margin-left: 5px; }
.profile-meta { color: #777; font-size: 14px; display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; padding-bottom: 15px; margin-bottom: 15px; position: relative; z-index: 1; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #777; font-size: 14px; font-weight: 500; padding: 10px 0; position: relative; }
.nav-tabs a.active { color: #3b5cff; font-weight: 600; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s ease; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon-sq { background: #fff; border: 1px solid #eee; color: #555; border-radius: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.btn-icon-sq:hover { background: #f8f9fa; border-color: #ddd; }
/* Filter Bar */
.filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.filter-bar h4 { font-size: 16px; font-weight: 600; color: #333; margin: 0; }
.filter-actions { display: flex; gap: 8px; }
.btn-view { background: #fff; border: 1px solid #f1f1f4; width: 36px; height: 36px; border-radius: 6px; color: #777; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.02);}
.btn-view.active { background: #f8f9fa; color: #333; border-color: #ddd; }
/* Network Grid */
.network-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; }
.network-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 30px 25px; display: flex; flex-direction: column; text-align: center; transition: all 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.01); }
.network-card:hover { border-color: #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.nc-avatar { position: relative; margin: 0 auto 15px auto; width: 70px; height: 70px; display: inline-flex; }
.nc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nc-letter { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 500; border-radius: 50%; border: 1px solid #e0e7ff; }
.letter-purple { color: #8b5cf6; background: #f5f3ff; }
.letter-red { color: #ef4444; background: #fef2f2; }
.letter-green { color: #10b981; background: #ecfdf5; }
.nc-online { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; background: #10b981; border: 2px solid #fff; border-radius: 50%; }
.nc-name { font-size: 16px; font-weight: 600; color: #333; margin: 0 0 6px 0; }
.nc-meta { font-size: 12px; color: #777; display: flex; justify-content: center; gap: 15px; margin-bottom: 25px; }
.nc-team-label { font-size: 10px; font-weight: 600; color: #999; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px; }
.nc-avatars { display: flex; justify-content: center; margin-bottom: 30px; }
.nc-avatars img, .nc-avatars span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; object-fit: cover; }
.nc-avatars > :first-child { margin-left: 0; }
.nc-avatars span { background: #3b82f6; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.ag-green { background: #10b981 !important; }
.nc-stats { display: flex; justify-content: center; gap: 40px; margin-bottom: 30px; }
.nc-stat { text-align: left; }
.nc-stat h5 { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 4px 0; }
.nc-stat p { font-size: 11px; color: #999; margin: 0; }
.nc-footer { margin-top: auto; text-align: center; }
.btn-connected { background: #fff; border: 1px solid #e5e7eb; color: #555; padding: 8px 20px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 130px; }
.btn-connected:hover { background: #f9fafb; border-color: #d1d5db; }
.btn-connect { background: #3b82f6; border: none; color: #fff; padding: 9px 20px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 130px; }
.btn-connect:hover { background: #2563eb; }
.show-more-link { display: block; text-align: center; color: #3b82f6; font-size: 14px; font-weight: 500; text-decoration: none; padding: 15px 0; border-top: 1px dashed #eee; margin-top: 10px; }
.show-more-link:hover { text-decoration: underline; }
@media(max-width: 991px) {
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.nav-tabs a.active::after { display: none; }
}
@media(max-width: 768px) {
.network-grid { grid-template-columns: 1fr; }
}
@media(max-width: 480px) {
.nc-stats { flex-wrap: wrap; gap: 20px; justify-content: space-around; }
.nc-stat { text-align: center; }
.nc-meta { flex-direction: column; gap: 5px; }
}
/* --- CSS from nft-profile.html --- */
/* Base Profile CSS */
.profile-header { background: #fff; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }
.cover-pattern { height: 120px; background: radial-gradient(circle, #f8f9fa 10%, transparent 10%), radial-gradient(circle, #f8f9fa 10%, transparent 10%); background-size: 20px 20px; background-position: 0 0, 10px 10px; background-color: #fff; }
.profile-info { text-align: center; margin-top: -50px; padding: 0 20px; }
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid #fff; outline: 2px solid #00c853; margin-bottom: 10px; }
.profile-info h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.verified-icon { color: #3b82f6; font-size: 16px; }
.profile-meta { color: #777; font-size: 13px; display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding: 10px 20px; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #555; font-size: 14px; font-weight: 500; padding: 10px 0; border-bottom: 2px solid transparent; }
.nav-tabs a.active { color: #3b5cff; border-bottom: 2px solid #3b5cff; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 14px; border-radius: 8px; font-weight: 500; cursor: pointer; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon { background: #f4f6fa; border: 1px solid #eee; color: #555; border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* Grid Layout */
.profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
.card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.card-header h4 { font-size: 15px; font-weight: 600; color: #333; margin:0;}
.card-header a { font-size: 12px; color: #3b5cff; text-decoration: none; font-weight: 500; }
/* Left Col Details */
.assets-box { margin-top: 10px; }
.asset-primary { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 600; color: #333; margin-bottom: 5px;}
.asset-primary i { color: #3b5cff; font-size: 20px; }
.asset-secondary { font-size: 13px; color: #888; padding-left: 30px; }
.about-list { list-style: none; padding: 0; font-size: 13px; color: #555; }
.about-list li { display: flex; margin-bottom: 12px; align-items: center; }
.about-list li span.label { width: 100px; color: #888; }
.about-list li span.value { font-weight: 500; color: #333; }
.status-badge { background: #dcfce7; color: #16a34a; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
.about-desc { font-size: 13px; color: #555; line-height: 1.6; margin-top: 15px; }
.badges-container { display: flex; gap: 10px; }
.badge-col { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.b-blue { background: #e0e7ff; color: #3b82f6; } .b-yellow { background: #fef08a; color: #ca8a04; } .b-green { background: #dcfce7; color: #16a34a; } .b-purple { background: #f3e8ff; color: #a855f7; }
.network-list { list-style: none; padding: 0; margin: 0; }
.network-list li { margin-bottom: 12px; font-size: 13px; }
.network-list li a { color: #555; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.network-list li i { color: #888; width: 16px; text-align: center; }
/* Right Col Details */
.nft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nft-card { border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; padding: 15px; display: flex; flex-direction: column; }
.nft-img { width: 100%; height: 180px; border-radius: 8px; object-fit: cover; margin-bottom: 15px; background: #fdfdfd; border: 1px solid #f4f6fa; }
.nft-info h5 { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 5px; }
.nft-token { font-size: 11px; color: #888; margin-bottom: 15px; font-weight: 500;}
.nft-meta { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px dashed #eee; padding-top: 12px;}
.nft-meta-col { display: flex; flex-direction: column; gap: 3px; }
.nft-meta-col .label { font-size: 11px; color: #888; }
.nft-meta-col .value { font-size: 12px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 5px;}
.nft-meta-col .value i { color: #3b82f6; font-size: 12px;}
@media(max-width:1100px){
.nft-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:900px){
.profile-grid { grid-template-columns: 1fr; }
.nft-grid { grid-template-columns: 1fr; }
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
}
/* --- CSS from notifications.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
/* Main Grid Layout */
.page-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-bottom: 30px; }
@media(max-width: 1024px) { .page-grid { grid-template-columns: 1fr; } }
/* Cards */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; overflow: hidden; }
.card-header-flex { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.card-header-title { font-size: 16px; font-weight: 700; color: #111; }
.card-header-right { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #777; }
/* Toggle Switch */
.toggle-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(16px); }
/* List items inside card */
.list-group { padding: 0; margin: 0; list-style: none; }
.list-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.list-item:last-child { border-bottom: none; }
.item-left { display: flex; align-items: center; gap: 15px; }
.item-icon { width: 40px; height: 40px; border-radius: 8px; background: #f9f9fb; border: 1px solid #f1f1f4; display: flex; align-items: center; justify-content: center; color: #555; font-size: 16px; }
.item-info { display: flex; flex-direction: column; gap: 3px; }
.item-title { font-size: 14px; font-weight: 600; color: #111; }
.item-desc { font-size: 13px; color: #777; }
.item-right { display: flex; align-items: center; gap: 15px; }
/* Info Cards & Sidebar */
.sidebar-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; margin-bottom: 20px; }
.sidebar-card-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 12px; }
.sidebar-card-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 20px; }
.btn-block { display: block; width: 100%; text-align: center; }
.info-icon { width: 35px; height: 35px; border-radius: 6px; background: #eff6ff; color: #3b82f6; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-size: 16px; }
.info-title { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 10px; line-height: 1.4; }
.info-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 15px; }
.info-link { font-size: 13px; color: #3b82f6; font-weight: 600; text-decoration: none; }
.info-link:hover { text-decoration: underline; }
/* FAQ & Support */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
.support-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; padding: 25px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;}
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; max-width: 500px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from permissions-check.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-primary { background: #3b82f6; color: #fff; border: none; padding: 8px 15px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.3s; display: inline-block; text-decoration: none; }
.btn-primary:hover { background: #2563eb; }
/* Main Grid Layout */
.page-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-bottom: 30px; }
@media(max-width: 1024px) { .page-grid { grid-template-columns: 1fr; } }
/* Cards & Tables */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; overflow: hidden; }
.card-header-flex { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.card-header-title { font-size: 16px; font-weight: 700; color: #111; }
.card-header-actions { display: flex; align-items: center; gap: 15px; }
/* Permissions Table specifically */
.perm-table-container { padding: 0; }
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 600px; }
.table th { text-align: left; padding: 15px 25px; font-size: 12px; font-weight: 600; color: #777; border-bottom: 1px dashed #e5e7eb; }
.table td { padding: 15px 25px; border-bottom: 1px dashed #e5e7eb; vertical-align: middle; font-size: 13px; }
.table tr:last-child td { border-bottom: none; }
.table th.text-center, .table td.text-center { text-align: center; }
/* Members Table Extras */
.table th i.fa-sort { color: #ccc; margin-left: 5px; cursor: pointer; }
.search-input { border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 12px 8px 35px; font-size: 13px; outline: none; width: 180px; background: url('data:image/svg+xml;utf8,') no-repeat 12px center; }
.search-input:focus { border-color: #3b82f6; }
.toggle-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(16px); }
.user-info { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.user-name { font-size: 14px; font-weight: 600; color: #111; display: block; }
.user-role { font-size: 12px; color: #777; }
.location { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #333; }
.location img { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
.status-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: capitalize;}
.status-active { background: #e0f8e9; color: #16a34a; }
.status-missing { background: #fef3c7; color: #d97706; }
.status-neutral { background: #fee2e2; color: #dc2626; }
.activity { font-size: 13px; color: #555; }
.action-btn { background: none; border: none; color: #999; cursor: pointer; padding: 5px; }
.pagination-wrap { padding: 15px 25px; border-top: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.per-page { font-size: 13px; color: #555; display: flex; align-items: center; gap: 10px; }
.pagination { display: flex; align-items: center; gap: 5px; list-style: none; padding: 0; margin: 0; }
.pagination li { display: inline-block; font-size: 13px; color: #777; }
.pagination a { padding: 6px 12px; border-radius: 4px; font-size: 13px; color: #555; text-decoration: none; border: 1px solid transparent; }
.pagination a:hover { background: #f1f1f4; }
.pagination a.active { background: #3b82f6; font-weight: 600; color: #fff; border: 1px solid #3b82f6; }
/* Custom Checkbox */
.custom-checkbox { position: relative; padding-left: 16px; cursor: pointer; font-size: 14px; user-select: none; display: inline-block; vertical-align: middle; height: 16px; }
.custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 16px; width: 16px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; }
.custom-checkbox:hover input ~ .checkmark { background-color: #f1f1f4; }
.custom-checkbox input:checked ~ .checkmark { background-color: #3b82f6; border-color: #3b82f6; }
.checkmark:after { content: ""; position: absolute; display: none; }
.custom-checkbox input:checked ~ .checkmark:after { display: block; }
.custom-checkbox .checkmark:after { left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Info Cards */
.info-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; margin-bottom: 20px; }
.info-icon { width: 35px; height: 35px; border-radius: 6px; background: #eff6ff; color: #3b82f6; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; font-size: 16px; }
.info-title { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 10px; line-height: 1.4; }
.info-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 15px; }
.info-link { font-size: 13px; color: #3b82f6; font-weight: 600; text-decoration: none; }
.info-link:hover { text-decoration: underline; }
/* FAQ & Support */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
@media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } }
.support-card { display: flex; align-items: stretch; justify-content: space-between; }
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from permissions-toggler.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
/* Card & Table */
.card-table { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; overflow: hidden; }
.card-header-flex { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.card-header-title { font-size: 16px; font-weight: 700; color: #111; }
.card-header-actions { display: flex; align-items: center; gap: 15px; }
.search-input { border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 12px 8px 35px; font-size: 13px; outline: none; width: 200px; background: url('data:image/svg+xml;utf8,') no-repeat 12px center; }
.search-input:focus { border-color: #3b82f6; }
.toggle-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(16px); }
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 800px; }
.table th { text-align: left; padding: 15px 25px; font-size: 12px; font-weight: 600; color: #777; border-bottom: 1px dashed #e5e7eb; }
.table td { padding: 15px 25px; border-bottom: 1px dashed #e5e7eb; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table th i.fa-sort { color: #ccc; margin-left: 5px; cursor: pointer; }
.user-info { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.user-name { font-size: 14px; font-weight: 600; color: #111; display: block; }
.user-role { font-size: 12px; color: #777; }
.location { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #333; }
.location img { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
.status-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: capitalize;}
.status-active { background: #e0f8e9; color: #16a34a; }
.status-missing { background: #fef3c7; color: #d97706; }
.status-neutral { background: #fee2e2; color: #dc2626; }
.activity { font-size: 13px; color: #555; }
.action-btn { background: none; border: none; color: #999; cursor: pointer; padding: 5px; }
.pagination-wrap { padding: 15px 25px; border-top: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.per-page { font-size: 13px; color: #555; display: flex; align-items: center; gap: 10px; }
.pagination { display: flex; align-items: center; gap: 5px; list-style: none; padding: 0; margin: 0; }
.pagination li { display: inline-block; font-size: 13px; color: #777; }
.pagination a { padding: 6px 12px; border-radius: 4px; font-size: 13px; color: #555; text-decoration: none; border: 1px solid transparent; }
.pagination a:hover { background: #f1f1f4; }
.pagination a.active { background: #3b82f6; font-weight: 600; color: #fff; border: 1px solid #3b82f6; }
/* Custom Checkbox */
.custom-checkbox { position: relative; padding-left: 20px; cursor: pointer; font-size: 14px; user-select: none; }
.custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 16px; width: 16px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; }
.custom-checkbox:hover input ~ .checkmark { background-color: #f1f1f4; }
.custom-checkbox input:checked ~ .checkmark { background-color: #3b82f6; border-color: #3b82f6; }
.checkmark:after { content: ""; position: absolute; display: none; }
.custom-checkbox input:checked ~ .checkmark:after { display: block; }
.custom-checkbox .checkmark:after { left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Permissions Grid */
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
@media(max-width: 900px) { .perm-grid { grid-template-columns: 1fr; } }
.perm-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; }
.perm-info { display: flex; align-items: center; gap: 15px; }
.perm-icon { width: 40px; height: 40px; border-radius: 50%; background: #f8fafc; color: #64748b; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.perm-title { font-size: 14px; font-weight: 600; color: #111; margin-bottom: 2px; }
.perm-desc { font-size: 12px; color: #777; }
/* FAQ & Support */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
@media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.card-body { padding: 25px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; }
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from plain-profile.html --- */
/* Base Profile CSS */
.profile-header { position: relative; margin-bottom: 20px; overflow: hidden; }
.cover-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%233b5cff' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; }
.profile-info { text-align: center; padding: 20px 20px 0; position: relative; z-index: 1; margin-top: 20px; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar::after { content: ''; position: absolute; bottom: 8px; right: 8px; width: 15px; height: 15px; background: #10b981; border: 2px solid #fff; border-radius: 50%; }
.profile-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333; }
.verified-icon { color: #3b82f6; font-size: 16px; margin-left: 5px; }
.profile-meta { color: #777; font-size: 14px; display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; padding-bottom: 15px; margin-bottom: 25px; position: relative; z-index: 1; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #777; font-size: 14px; font-weight: 500; padding: 10px 0; position: relative; }
.nav-tabs a.active { color: #3b5cff; font-weight: 600; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s ease; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon { background: #fff; border: 1px solid #eee; color: #555; border-radius: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.btn-icon:hover { background: #f8f9fa; border-color: #ddd; }
/* Top Stats Bar */
.top-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 12px; padding: 25px 20px; margin-bottom: 20px; text-align: center; border: 1px solid #f1f1f4; }
.top-stat-item { border-right: 1px solid #f1f1f4; }
.top-stat-item:last-child { border-right: none; }
.top-stat-item h2 { font-size: 24px; font-weight: 600; color: #333; margin-bottom: 5px; }
.top-stat-item p { font-size: 13px; color: #777; margin: 0; }
/* Empty State */
.empty-state { background: #fff; border-radius: 12px; padding: 50px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #f1f1f4; text-align: center; margin-bottom: 20px; }
.empty-state img { width: 200px; margin-bottom: 20px; opacity: 0.8; }
.empty-state h4 { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px; }
.empty-state p { font-size: 14px; color: #777; margin-bottom: 0; }
.empty-state p a { color: #333; font-weight: 600; text-decoration: none; }
/* Grid Layout */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { background: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #f1f1f4; margin-bottom: 20px; height: 100%; min-height: 250px; }
.card-header { margin-bottom: 20px; }
.card-header h4 { font-size: 16px; font-weight: 600; color: #333; mragin: 0; }
/* Profile Details list */
.profile-list { list-style: none; padding: 0; margin: 0; }
.profile-list li { display: flex; align-items: center; margin-bottom: 15px; font-size: 14px; color: #555; }
.profile-list li:last-child { margin-bottom: 0; }
.profile-list li i { width: 30px; font-size: 16px; color: #999; text-align: center; }
.profile-list li a { color: #555; text-decoration: none; }
.profile-list li span { color: #333; font-weight: 500; }
.about-text { font-size: 14px; color: #555; line-height: 1.7; margin-bottom: 15px; }
.about-text:last-child { margin-bottom: 0; }
.open-work-text { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 20px; }
.view-details-link { display: block; text-align: center; font-size: 14px; color: #3b5cff; text-decoration: none; border-top: 1px dashed #eee; padding-top: 15px; }
.skills-list { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-tag { border: 1px solid #eee; background: #fafafa; padding: 6px 12px; border-radius: 6px; font-size: 12px; color: #555; font-weight: 500; }
@media(max-width:900px){
.top-stats-bar { grid-template-columns: 1fr 1fr; gap: 20px; }
.top-stat-item { border: none; }
.profile-grid { grid-template-columns: 1fr; }
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.nav-tabs a.active::after { display: none; }
.card { min-height: auto; }
}
/* --- CSS from projects-2-columns.html --- */
/* Base Profile CSS */
.profile-header { position: relative; margin-bottom: 20px; overflow: hidden; background: transparent; }
.cover-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%233b5cff' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; }
.profile-info { text-align: center; padding: 20px 20px 0; position: relative; z-index: 1; margin-top: 20px; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar::after { content: ''; position: absolute; bottom: 8px; right: 8px; width: 15px; height: 15px; background: #10b981; border: 2px solid #fff; border-radius: 50%; }
.profile-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333; }
.verified-icon { color: #3b82f6; font-size: 16px; margin-left: 5px; }
.profile-meta { color: #777; font-size: 14px; display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; padding-bottom: 15px; margin-bottom: 15px; position: relative; z-index: 1; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #777; font-size: 14px; font-weight: 500; padding: 10px 0; position: relative; }
.nav-tabs a.active { color: #3b5cff; font-weight: 600; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s ease; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon-sq { background: #fff; border: 1px solid #eee; color: #555; border-radius: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.btn-icon-sq:hover { background: #f8f9fa; border-color: #ddd; }
/* Filter Bar */
.filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.filter-bar h4 { font-size: 16px; font-weight: 600; color: #333; margin: 0; }
.filter-actions { display: flex; gap: 8px; }
.btn-view { background: #fff; border: 1px solid #f1f1f4; width: 36px; height: 36px; border-radius: 6px; color: #777; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.02);}
.btn-view.active { background: #f8f9fa; color: #333; border-color: #ddd; }
/* 2 Columns Grid */
.projects-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; }
.project-card-2 { background: #fff; border-radius: 12px; border: 1px solid #f1f1f4; box-shadow: 0 1px 3px rgba(0,0,0,0.02); display: flex; flex-direction: column; text-align: center; overflow: hidden; position: relative; padding-bottom: 4px; transition: all 0.3s ease; }
.project-card-2:hover { border-color: #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.pc2-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.pc2-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.pc-badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.pb-progress { background: #eff6ff; color: #3b82f6; }
.pb-completed { background: #f0fdf4; color: #22c55e; }
.pb-upcoming { background: #f8f9fa; color: #777; border: 1px solid #eee; }
.pc2-options { color: #999; cursor: pointer; font-size: 16px; padding: 5px; }
.pc2-options:hover { color: #555; }
.pc2-icon-wrap { margin-bottom: 15px; display: inline-flex; justify-content: center; align-items: center; }
.pc2-icon { width: 50px; height: 50px; font-size: 40px; display: flex; align-items: center; justify-content: center; }
.pc2-title { font-size: 16px; font-weight: 600; color: #333; margin: 0 0 6px 0; }
.pc2-desc { font-size: 13px; color: #777; margin: 0 0 25px 0; }
.pc2-team-label { font-size: 10px; font-weight: 600; color: #999; letter-spacing: 0.5px; margin-bottom: 10px; text-transform: uppercase; }
.pc2-avatars { display: flex; justify-content: center; margin-bottom: 30px; }
.pc2-avatars img, .pc2-avatars span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; object-fit: cover; }
.pc2-avatars > :first-child { margin-left: 0; }
.pc2-avatars span { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; background: #3b82f6; }
.ag-blue { background: #3b82f6 !important; }
.ag-orange { background: #f59e0b !important; }
.ag-purple { background: #a855f7 !important; }
.pc2-stats { display: flex; justify-content: center; gap: 40px; margin-top: auto; padding: 0 10px; width: max-content; margin: 0 auto; }
.pc2-stat { text-align: left; }
.pc2-stat h5 { font-size: 13px; font-weight: 600; color: #333; margin: 0 0 4px 0; }
.pc2-stat p { font-size: 12px; color: #999; margin: 0; font-weight: 500;}
.pc2-progress-bar { position: absolute; bottom: 0; left: 0; height: 4px; border-radius: 0; }
.show-more-link { display: block; text-align: center; color: #3b82f6; font-size: 14px; font-weight: 500; text-decoration: none; padding: 15px 0; border-top: 1px dashed #eee; margin-top: 10px; }
.show-more-link:hover { text-decoration: underline; }
@media(max-width: 900px) {
.projects-grid-2 { grid-template-columns: 1fr; }
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.nav-tabs a.active::after { display: none; }
}
@media(max-width: 480px) {
.pc2-stats { gap: 20px; flex-wrap: wrap; text-align: center; justify-content: space-around; width: 100%;}
.pc2-stat { text-align: center; }
}
/* --- CSS from projects-3-columns.html --- */
/* Base Profile CSS */
.profile-header { position: relative; margin-bottom: 20px; overflow: hidden; background: transparent; }
.cover-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%233b5cff' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; }
.profile-info { text-align: center; padding: 20px 20px 0; position: relative; z-index: 1; margin-top: 20px; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar::after { content: ''; position: absolute; bottom: 8px; right: 8px; width: 15px; height: 15px; background: #10b981; border: 2px solid #fff; border-radius: 50%; }
.profile-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333; }
.verified-icon { color: #3b82f6; font-size: 16px; margin-left: 5px; }
.profile-meta { color: #777; font-size: 14px; display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; padding-bottom: 15px; margin-bottom: 15px; position: relative; z-index: 1; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #777; font-size: 14px; font-weight: 500; padding: 10px 0; position: relative; }
.nav-tabs a.active { color: #3b5cff; font-weight: 600; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s ease; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon-sq { background: #fff; border: 1px solid #eee; color: #555; border-radius: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.btn-icon-sq:hover { background: #f8f9fa; border-color: #ddd; }
/* Filter Bar */
.filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.filter-bar h4 { font-size: 16px; font-weight: 600; color: #333; margin: 0; }
.filter-actions { display: flex; gap: 8px; }
.btn-view { background: #fff; border: 1px solid #f1f1f4; width: 36px; height: 36px; border-radius: 6px; color: #777; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.02);}
.btn-view.active { background: #f8f9fa; color: #333; border-color: #ddd; }
/* 3 Columns Grid */
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.project-card { background: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); border: 1px solid #f1f1f4; display: flex; flex-direction: column; }
.project-card:hover { border-color: #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.pc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.pc-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.pc-badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.pb-progress { background: #eff6ff; color: #3b82f6; }
.pb-completed { background: #f0fdf4; color: #22c55e; }
.pb-upcoming { background: #f8f9fa; color: #777; border: 1px solid #eee; }
.pc-title { font-size: 16px; font-weight: 600; color: #333; margin: 0 0 6px 0; }
.pc-desc { font-size: 13px; color: #777; margin: 0 0 20px 0; line-height: 1.5; flex-grow: 1; }
.pc-dates { font-size: 12px; color: #555; display: flex; gap: 15px; margin-bottom: 15px; font-weight: 500; }
.pc-progress { height: 4px; border-radius: 2px; width: 100%; background: #f1f1f4; margin-bottom: 20px; }
.pc-progress-fill { height: 100%; border-radius: 2px; }
.pc-footer { display: flex; justify-content: flex-start; }
.avatars-group { display: flex; }
.avatars-group img, .avatars-group span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; object-fit: cover; }
.avatars-group > :first-child { margin-left: 0; }
.avatars-group span { background: #10b981; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.ag-blue { background: #3b82f6 !important; }
.ag-red { background: #ef4444 !important; }
.show-more-link { display: block; text-align: center; color: #3b82f6; font-size: 14px; font-weight: 500; text-decoration: none; padding: 15px 0; border-top: 1px dashed #eee; margin-top: 10px; }
.show-more-link:hover { text-decoration: underline; }
@media(max-width: 991px) {
.projects-grid { grid-template-columns: repeat(2, 1fr); }
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.nav-tabs a.active::after { display: none; }
}
@media(max-width: 600px) {
.projects-grid { grid-template-columns: 1fr; }
}
/* --- CSS from roles-teams.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
/* Table Card styling */
.table-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; overflow: hidden; }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.card-title { font-size: 16px; font-weight: 700; color: #111; margin: 0; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.search-box { position: relative; scrollbar-width: 1px; }
.search-box > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #999; font-size: 13px; }
.search-box input { border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 15px 8px 32px; font-size: 13px; color: #333; outline: none; width: 200px; transition: border-color 0.2s; }
.search-box input:focus { border-color: #3b82f6; }
/* Switch for Active Groups */
.toggle-switch-wrapper { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: #555; }
.switch { position: relative; display: inline-block; width: 34px; height: 18px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e2e8f0; border-radius: 34px; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; transition: .4s; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
input:checked + .slider { background-color: #10b981; }
input:checked + .slider:before { transform: translateX(16px); }
/* Table styling */
.data-table { border-collapse: collapse; width: 100%; min-width: 900px; text-align: left; }
.data-table th { padding: 15px 25px; font-size: 12px; font-weight: 600; color: #555; border-bottom: 1px solid #f1f1f4; background: #fff; position: relative; cursor: pointer; }
.data-table th i { color: #a1a1aa; font-size: 10px; margin-left: 5px; }
.data-table td { padding: 18px 25px; border-bottom: 1px dashed #e5e7eb; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 1px solid #f1f1f4; }
.data-table tr:hover { background: #fafafa; }
/* Checkbox */
.custom-checkbox { width: 18px; height: 18px; border-radius: 4px; border: 1px solid #cbd5e1; appearance: none; outline: none; cursor: pointer; position: relative; background: #fff; }
.custom-checkbox:checked { background: #3b82f6; border-color: #3b82f6; }
.custom-checkbox:checked::after { content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #fff; font-size: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* Team column */
.team-name { font-size: 14px; font-weight: 600; color: #111; margin: 0 0 4px 0; }
.team-desc { font-size: 12px; color: #777; margin: 0; }
/* Rating */
.rating-stars { color: #facc15; font-size: 13px; }
.rating-stars .fa-regular { color: #cbd5e1; }
.last-modified { font-size: 13px; color: #555; font-weight: 500; }
/* Members Avatars */
.avatar-group { display: flex; align-items: center; }
.avatar-group img, .avatar-group .avatar-badge { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; object-fit: cover; }
.avatar-group > :first-child { margin-left: 0; }
.avatar-badge { background: #10b981; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; z-index: 1; border: 2px solid #fff;}
.badge-orange { background: #f59e0b; }
.badge-purple { background: #8b5cf6; }
.badge-blue { background: #3b82f6; }
/* Table Actions */
.btn-icon { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; color: #777; display: inline-flex; align-items: center; justify-content: center; margin-right: 5px; cursor: pointer; transition: all 0.2s; }
.btn-icon:hover { background: #f8f9fa; border-color: #cbd5e1; color: #333; }
.btn-icon:last-child { margin-right: 0; }
/* Pagination */
.pagination-wrapper { padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.show-per-page { font-size: 13px; color: #555; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.show-per-page select { padding: 5px 10px; border: 1px solid #e5e7eb; border-radius: 6px; outline: none; background: #fff; color: #333; cursor: pointer; }
.pagination { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #555; }
.pagination span { margin-right: 15px; }
.page-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; color: #555; text-decoration: none; }
.page-btn:hover { background: #f1f5f9; }
.page-btn.active { background: #f1f5f9; font-weight: 600; color: #333; }
/* FAQ Card & Support (Reused from teams-starter) */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
@media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.card-body { padding: 25px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; }
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from roles.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
/* Roles Grid */
.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
@media(max-width: 1024px) { .roles-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 640px) { .roles-grid { grid-template-columns: 1fr; } }
.role-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; display: flex; flex-direction: column; }
.role-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 15px; }
.role-icon-wrap { display: flex; align-items: center; gap: 12px; }
.role-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.role-title { font-size: 14px; font-weight: 700; color: #111; display: block; margin-bottom: 2px; }
.role-subtitle { font-size: 12px; color: #777; }
.role-action { background: none; border: none; color: #999; cursor: pointer; padding: 5px; }
.role-desc { font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 20px; flex-grow: 1; }
.role-footer { font-size: 13px; font-weight: 600; color: #111; }
/* Add New Role Card */
.add-role-card { background: transparent; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 40px 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: all 0.2s; }
.add-role-card:hover { border-color: #3b82f6; background: #f8fafc; }
.add-icon { width: 60px; height: 60px; border-radius: 50%; background: #eff6ff; color: #3b82f6; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 15px; }
.add-title { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 5px; }
.add-subtitle { font-size: 13px; color: #777; }
/* Icon Colors */
.icon-blue { background: #eff6ff; color: #3b82f6; }
.icon-green { background: #f0fdf4; color: #16a34a; }
.icon-red { background: #fef2f2; color: #ef4444; }
.icon-purple { background: #faf5ff; color: #a855f7; }
.icon-gray { background: #f8fafc; color: #64748b; }
.icon-teal { background: #f0fdfa; color: #14b8a6; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from security-allowed-ip.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-filled { border: none; background: #3b82f6; color: #fff; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-filled:hover { background: #2a6ae2; }
/* Full Width Cards */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 25px; }
.card-body { padding: 25px; }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 14px; font-weight: 600; color: #111; margin: 0; }
/* Toggle */
.toggle-switch { position: relative; width: 34px; height: 20px; background: #3b82f6; border-radius: 20px; cursor: pointer; display: inline-block; vertical-align: middle; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: 0.2s;}
.toggle-switch.off { background: #e5e7eb; }
.toggle-switch.off::after { left: 2px; right: auto; }
/* Table */
.modern-table { width: 100%; border-collapse: collapse; font-size: 13px; overflow-x: auto; }
.modern-table th { text-align: left; padding: 15px; color: #777; font-weight: 600; border-bottom: 1px dashed #e5e7eb; white-space: nowrap; }
.modern-table td { padding: 15px; border-bottom: 1px dashed #e5e7eb; color: #333; font-weight: 500; vertical-align: middle; }
.modern-table tbody tr:hover { background: #f8fafc; }
.modern-table th i { font-size: 10px; margin-left: 5px; color: #aaa; cursor: pointer; }
.btn-icon-sm { background: none; border: none; color: #aaa; cursor: pointer; font-size: 14px; transition: 0.2s; padding: 4px; border-radius: 4px; }
.btn-icon-sm:hover { color: #3b82f6; background: #f0f4ff; }
/* Status Dots */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.status-green { background: #10b981; }
.status-red { background: #ef4444; }
.status-yellow { background: #f59e0b; }
/* Pagination Area */
.pagination-area { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-top: 1px solid #f1f1f4; font-size: 12px; color: #555; }
.pagination { display: flex; align-items: center; gap: 8px; }
.page-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; color: #555; text-decoration: none; font-weight: 600; transition: 0.2s; }
.page-btn.active { background: #f0f4ff; color: #3b82f6; }
.page-btn:hover:not(.active) { background: #f1f1f4; }
.select-limit { padding: 4px; border: 1px solid #ddd; border-radius: 4px; outline: none; }
/* Custom Checkbox */
.custom-check { width: 16px; height: 16px; border: 1px solid #d1d5db; border-radius: 4px; display: inline-block; vertical-align: middle; cursor: pointer; margin-right: 10px; }
/* FAQ Accordion */
.faq-item { border-bottom: 1px solid #f1f1f4; padding: 18px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-item:last-child { border-bottom: none; }
.faq-title { font-size: 13px; font-weight: 500; color: #333; }
.faq-icon { font-size: 14px; color: #aaa; }
/* Bottom Grid Support Cards */
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .support-grid { grid-template-columns: 1fr; } }
.support-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 25px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; min-height: 220px; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; max-width: 60%; }
.support-desc { font-size: 12px; color: #777; margin: 0 0 20px 0; max-width: 55%; line-height: 1.5; }
.support-link { font-size: 12px; font-weight: 600; color: #3b82f6; text-decoration: none; text-align: center; display: block; margin-top: auto; }
.support-image { position: absolute; right: 20px; bottom: 40px; max-width: 140px; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from security-backup-recovery.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-primary { background: #3b82f6; color: #fff; border: none; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-primary:hover { background: #2563eb; }
/* Grid */
.billing-grid { display: grid; grid-template-columns: 2.2fr 1fr; gap: 25px; align-items: start; }
@media (max-width: 900px) { .billing-grid { grid-template-columns: 1fr; } }
/* Card */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 25px; overflow: hidden; }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 15px; font-weight: 700; color: #111; margin: 0; }
/* Table */
.table-wrapper { overflow-x: auto; }
.modern-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.modern-table th { text-align: left; padding: 12px 25px; color: #777; font-weight: 600; border-bottom: 1px solid #f1f1f4; background: #fafafa; white-space: nowrap; }
.modern-table td { padding: 15px 25px; border-bottom: 1px solid #f1f1f4; color: #555; vertical-align: middle; white-space: nowrap; }
.modern-table tbody tr:hover { background-color: #f8fafc; }
.modern-table tbody tr:last-child td { border-bottom: none; }
.cell-content-main { margin: 0 0 4px 0; font-size: 13px; font-weight: 600; color: #111; }
.cell-content-sub { font-size: 12px; color: #777; display: flex; align-items: center; gap: 10px;}
.cell-content-sub i { font-size: 12px; color: #aaa; }
.action-buttons { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.btn-sm-primary { background: #3b82f6; color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; }
.btn-sm-outline { background: white; color: #333; border: 1px solid #e5e7eb; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; }
.btn-sm-primary:hover { background: #2563eb; }
.btn-sm-outline:hover { background: #f9f9f9; }
/* Checkbox */
.custom-checkbox { width: 15px; height: 15px; accent-color: #3b82f6; cursor: pointer; margin: 0; vertical-align: middle; }
.sort-icon { display: inline-block; margin-left: 5px; color: #aaa; font-size: 11px; }
/* Pagination */
.pagination-area { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-top: 1px solid #f1f1f4; background: #fff; flex-wrap: wrap; gap: 15px; }
.page-limit { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; font-weight: 500; }
.page-limit select { padding: 5px 30px 5px 10px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 13px; color: #111; font-weight: 500; outline: none; appearance: none; background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') no-repeat right 10px top 50%; background-size: 8px auto; }
.pagination { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.pagination span.info { color: #555; margin-right: 10px; font-weight: 500;}
.page-btn { background: none; border: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #555; cursor: pointer; transition: 0.2s; font-weight: 500; }
.page-btn:hover { background: #f3f4f6; color: #111; }
.page-btn.active { background: #f3f4f6; color: #111; font-weight: 700; }
.page-btn.disabled { opacity: 0.5; cursor: not-allowed; }
/* Toggle */
.toggle-switch { position: relative; width: 34px; height: 20px; background: #3b82f6; border-radius: 20px; cursor: pointer; display: inline-block; vertical-align: middle; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: 0.2s;}
.toggle-switch.off { background: #e5e7eb; }
.toggle-switch.off::after { left: 2px; right: auto; }
/* FAQ Accordion */
.faq-item { border-bottom: 1px solid #f1f1f4; }
.faq-item:last-child { border-bottom: none; }
.faq-btn { width: 100%; text-align: left; background: none; border: none; padding: 20px 25px; font-size: 14px; font-weight: 600; color: #111; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-btn i { color: #aaa; transition: 0.3s; }
.faq-content { padding: 0 25px 20px 25px; display: none; font-size: 13px; color: #777; line-height: 1.6; }
/* Right Column Setting Items */
.setting-item { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; }
.setting-item:last-child { border-bottom: none; }
.setting-info h4 { margin: 0 0 5px 0; font-size: 13px; font-weight: 600; color: #111; }
.setting-info p { margin: 0; font-size: 12px; color: #777; }
.setting-select { padding: 6px 30px 6px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 12px; color: #333; outline: none; appearance: none; background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') no-repeat right 10px top 50%; background-size: 8px auto; }
/* Info Box */
.info-box { padding: 25px; border-bottom: 1px dashed #e5e7eb; }
.info-box:last-child { border-bottom: none; }
.info-icon { width: 40px; height: 40px; background: #eff6ff; color: #3b82f6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 20px; }
.info-title { font-size: 14px; font-weight: 700; color: #111; margin: 0 0 10px 0; line-height: 1.4; }
.info-desc { font-size: 13px; color: #777; margin: 0 0 15px 0; line-height: 1.6; }
.info-link { font-size: 11px; font-weight: 700; color: #3b82f6; text-decoration: none; display:inline-block; }
.info-link:hover { text-decoration: underline; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from security-current-sessions.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
/* Card */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 25px; overflow: hidden; }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.card-title { font-size: 15px; font-weight: 700; color: #111; margin: 0; }
/* Filter Controls */
.filter-controls { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.filter-label { font-size: 13px; font-weight: 600; color: #555; display: flex; align-items: center; gap: 10px; }
.filter-select { padding: 8px 30px 8px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 13px; color: #555; outline: none; appearance: none; background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23aaa%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') no-repeat right 10px top 50%; background-size: 8px auto; background-color: #fff; cursor: pointer; min-width: 130px; }
/* Toggle */
.toggle-switch { position: relative; width: 34px; height: 20px; background: #3b82f6; border-radius: 20px; cursor: pointer; display: inline-block; vertical-align: middle; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: 0.2s;}
.toggle-switch.off { background: #e5e7eb; }
.toggle-switch.off::after { left: 2px; right: auto; }
/* Table */
.table-wrapper { overflow-x: auto; }
.modern-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.modern-table th { text-align: left; padding: 15px 25px; color: #777; font-weight: 600; border-bottom: 1px solid #f1f1f4; background: #fafafa; white-space: nowrap; }
.modern-table td { padding: 15px 25px; border-bottom: 1px solid #f1f1f4; color: #555; vertical-align: middle; white-space: nowrap; font-weight: 500;}
.modern-table tbody tr:hover { background-color: #f9f9fb; }
.modern-table tbody tr:last-child td { border-bottom: none; }
.user-td { display: flex; align-items: center; gap: 12px; font-weight: 600; color: #111; }
.user-td img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.browser-td { display: flex; align-items: center; gap: 10px; }
.browser-td i { font-size: 16px; color: #777; }
.location-td { display: flex; align-items: center; gap: 8px; }
.location-td img { width: 20px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.more-btn { background: none; border: none; color: #ccc; cursor: pointer; font-size: 16px; padding: 5px; }
.more-btn:hover { color: #555; }
/* Checkbox */
.custom-checkbox { width: 15px; height: 15px; accent-color: #3b82f6; cursor: pointer; margin: 0; vertical-align: middle; }
.sort-icon { display: inline-block; margin-left: 5px; color: #aaa; font-size: 11px; }
/* Pagination */
.pagination-area { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-top: 1px solid #f1f1f4; background: #fff; flex-wrap: wrap; gap: 15px; }
.page-limit { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; font-weight: 500; }
.page-limit select { padding: 5px 30px 5px 10px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 13px; color: #111; font-weight: 500; outline: none; appearance: none; background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') no-repeat right 10px top 50%; background-size: 8px auto; }
.pagination { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.pagination span.info { color: #555; margin-right: 10px; font-weight: 500;}
.page-btn { background: none; border: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #555; cursor: pointer; transition: 0.2s; font-weight: 500; }
.page-btn:hover { background: #f3f4f6; color: #111; }
.page-btn.active { background: #f3f4f6; color: #111; font-weight: 700; }
.page-btn.disabled { opacity: 0.5; cursor: not-allowed; }
/* FAQ Accordion */
.faq-item { border-bottom: 1px solid #f1f1f4; }
.faq-item:last-child { border-bottom: none; }
.faq-btn { width: 100%; text-align: left; background: none; border: none; padding: 20px 25px; font-size: 14px; font-weight: 600; color: #111; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-btn i { color: #aaa; transition: 0.3s; }
.faq-content { padding: 0 25px 20px 25px; display: none; font-size: 13px; color: #777; line-height: 1.6; }
/* Bottom Cards */
.bottom-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
@media (max-width: 800px) { .bottom-cards { grid-template-columns: 1fr; } }
.info-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 30px; display: flex; flex-direction: column; position: relative; overflow: hidden;}
.info-card h3 { font-size: 18px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.info-card p { font-size: 13px; color: #777; margin: 0 0 20px 0; line-height: 1.6; max-width: 60%; }
.info-card a { font-size: 13px; font-weight: 600; color: #3b82f6; text-decoration: none; margin-top: auto; }
.info-card a:hover { text-decoration: underline; }
.info-card-img { position: absolute; right: 20px; bottom: 20px; width: 140px; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from security-device-management.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #111; font-weight: 500; }
.page-meta a { color: #3b82f6; text-decoration: none; }
.page-meta a:hover { text-decoration: underline; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-primary { background: #3b82f6; color: #fff; border: none; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-primary:hover { background: #2563eb; }
/* Card */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 25px; overflow: hidden; }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 16px; font-weight: 700; color: #111; margin: 0; }
/* Table */
.table-wrapper { overflow-x: auto; }
.modern-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.modern-table th { text-align: left; padding: 12px 25px; color: #777; font-weight: 600; border-bottom: 1px solid #f1f1f4; background: #fafafa; white-space: nowrap; }
.modern-table td { padding: 15px 25px; border-bottom: 1px solid #f1f1f4; color: #555; vertical-align: middle; white-space: nowrap; }
.modern-table tbody tr:hover { background-color: #f8fafc; }
.modern-table tbody tr:last-child td { border-bottom: none; }
.device-info { display: flex; align-items: center; gap: 15px; }
.device-icon { width: 32px; height: 32px; background: #f3f4f6; color: #555; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.device-text h4 { margin: 0 0 2px 0; font-size: 14px; font-weight: 600; color: #111; }
.device-text span { font-size: 12px; color: #777; }
.action-icons { display: flex; gap: 10px; align-items: center; }
.icon-btn { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 14px; transition: 0.2s; padding: 5px; border-radius: 4px; }
.icon-btn:hover { color: #3b82f6; background: #eff6ff; }
.icon-btn.delete:hover { color: #ef4444; background: #fef2f2; }
/* Checkbox */
.custom-checkbox { width: 16px; height: 16px; accent-color: #3b82f6; cursor: pointer; margin: 0; vertical-align: middle; }
/* Sort icon */
.sort-icon { display: inline-block; margin-left: 5px; color: #aaa; font-size: 11px; }
/* Pagination */
.pagination-area { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-top: 1px solid #f1f1f4; background: #fff; flex-wrap: wrap; gap: 15px; }
.page-limit { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; font-weight: 500; }
.page-limit select { padding: 5px 30px 5px 10px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 13px; color: #111; font-weight: 500; outline: none; appearance: none; background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') no-repeat right 10px top 50%; background-size: 8px auto; }
.pagination { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.pagination span.info { color: #555; margin-right: 10px; font-weight: 500;}
.page-btn { background: none; border: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #555; cursor: pointer; transition: 0.2s; font-weight: 500; }
.page-btn:hover { background: #f3f4f6; color: #111; }
.page-btn.active { background: #f3f4f6; color: #111; font-weight: 700; }
.page-btn.disabled { opacity: 0.5; cursor: not-allowed; }
/* Bottom Cards */
.bottom-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 25px; }
@media (max-width: 800px) { .bottom-cards { grid-template-columns: 1fr; } }
.info-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 30px; display: flex; flex-direction: column; position: relative; overflow: hidden;}
.info-card h3 { font-size: 18px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.info-card p { font-size: 13px; color: #777; margin: 0 0 20px 0; line-height: 1.6; max-width: 60%; }
.info-card a { font-size: 13px; font-weight: 600; color: #3b82f6; text-decoration: none; margin-top: auto; }
.info-card a:hover { text-decoration: underline; }
.info-card-img { position: absolute; right: 20px; bottom: 20px; width: 140px; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from security-get-started.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-header { margin-bottom: 40px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.page-meta a { color: #3b82f6; text-decoration: none; font-weight: 500; }
.page-meta a:hover { text-decoration: underline; }
/* Grid Layout */
.security-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px) { .security-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .security-grid { grid-template-columns: 1fr; } }
/* Cards */
.security-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; text-decoration: none; color: inherit; transition: all 0.2s; display: flex; flex-direction: column; align-items: flex-start; }
.security-card:hover { border-color: #3b82f6; box-shadow: 0 5px 15px rgba(59, 130, 246, 0.05); transform: translateY(-2px); }
.card-icon { width: 44px; height: 44px; background: #fff; color: #3b82f6; border: 1px dashed #3b82f6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 20px; }
.security-card h3 { font-size: 15px; font-weight: 600; color: #111; margin: 0 0 10px 0; font-family: 'Inter', sans-serif; }
.security-card p { font-size: 12px; color: #777; margin: 0; line-height: 1.5; font-family: 'Inter', sans-serif; }
/* --- CSS from security-log.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #111; font-weight: 500; }
.page-meta a { color: #3b82f6; text-decoration: none; }
.page-meta a:hover { text-decoration: underline; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
/* Card */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 25px; overflow: hidden; }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.card-title { font-size: 15px; font-weight: 700; color: #111; margin: 0; }
/* Toggle */
.toggle-switch { position: relative; width: 34px; height: 20px; background: #3b82f6; border-radius: 20px; cursor: pointer; display: inline-block; vertical-align: middle; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: 0.2s;}
.toggle-switch.off { background: #e5e7eb; }
.toggle-switch.off::after { left: 2px; right: auto; }
/* Table */
.table-wrapper { overflow-x: auto; }
.modern-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.modern-table th { text-align: left; padding: 15px 20px; color: #777; font-weight: 600; border-bottom: 1px solid #f1f1f4; background: #fafafa; white-space: nowrap; }
.modern-table td { padding: 15px 20px; border-bottom: 1px solid #f1f1f4; color: #555; vertical-align: middle; white-space: nowrap; font-weight: 500;}
.modern-table tbody tr:hover { background-color: #f9f9fb; }
.modern-table tbody tr:last-child td { border-bottom: none; }
.event-type-td { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #111; }
.icon-red { color: #ef4444; }
.icon-yellow { color: #eab308; }
.icon-blue { color: #3b82f6; }
.icon-green { color: #10b981; }
.icon-purple { color: #a855f7; }
/* Severity Badges */
.badge-custom { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; display: inline-block; }
.badge-high { color: #eab308; background: #fef9c3; }
.badge-medium { color: #3b82f6; background: #eff6ff; }
.badge-low { color: #10b981; background: #d1fae5; }
.badge-critical { color: #ef4444; background: #fee2e2; }
.action-icon-btn { background: none; border: none; color: #ccc; cursor: pointer; font-size: 14px; padding: 5px; }
.action-icon-btn:hover { color: #555; }
/* Checkbox */
.custom-checkbox { width: 14px; height: 14px; accent-color: #3b82f6; cursor: pointer; margin: 0; vertical-align: middle; }
.sort-icon { display: inline-block; margin-left: 5px; color: #aaa; font-size: 11px; }
/* Pagination */
.pagination-area { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-top: 1px solid #f1f1f4; background: #fff; flex-wrap: wrap; gap: 15px; }
.page-limit { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; font-weight: 500; }
.page-limit select { padding: 5px 30px 5px 10px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 13px; color: #111; font-weight: 500; outline: none; appearance: none; background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') no-repeat right 10px top 50%; background-size: 8px auto; }
.pagination { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.pagination span.info { color: #555; margin-right: 10px; font-weight: 500;}
.page-btn { background: none; border: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #555; cursor: pointer; transition: 0.2s; font-weight: 500; }
.page-btn:hover { background: #f3f4f6; color: #111; }
.page-btn.active { background: #f3f4f6; color: #111; font-weight: 700; }
.page-btn.disabled { opacity: 0.5; cursor: not-allowed; }
/* Bottom Cards */
.bottom-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
@media (max-width: 800px) { .bottom-cards { grid-template-columns: 1fr; } }
.info-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 30px; display: flex; flex-direction: column; position: relative; overflow: hidden;}
.info-card h3 { font-size: 18px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.info-card p { font-size: 13px; color: #777; margin: 0 0 20px 0; line-height: 1.6; max-width: 60%; }
.info-card a { font-size: 13px; font-weight: 600; color: #3b82f6; text-decoration: none; margin-top: auto; }
.info-card a:hover { text-decoration: underline; }
.info-card-img { position: absolute; right: 20px; bottom: 20px; width: 140px; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from security-overview.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
/* Grid */
.billing-grid { display: grid; grid-template-columns: 2.2fr 1fr; gap: 25px; align-items: start; }
@media (max-width: 900px) { .billing-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 25px; }
.card-body { padding: 25px; }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 14px; font-weight: 600; color: #111; margin: 0; display:flex; align-items:center; gap: 10px; }
/* Banner Card */
.banner-card { padding: 25px; position: relative; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 25px; }
.banner-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 8px 0; }
.banner-desc { font-size: 13px; color: #777; margin: 0 0 20px 0; max-width: 400px; line-height: 1.5; }
.banner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; max-width: 400px; }
.tick-item { font-size: 13px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 8px; }
.banner-link { font-size: 13px; font-weight: 600; color: #3b82f6; text-decoration: none; }
.banner-image { position: absolute; right: 30px; top: 30px; width: 140px; }
@media (max-width: 650px) { .banner-image { display: none; } }
/* Badges */
.badge { padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.badge.blue { background: #e0e7ff; color: #3b82f6; }
.badge.purple { background: #f3e8ff; color: #a855f7; }
.badge.red-outline { border: 1px solid #fca5a5; color: #ef4444; background: #fff; }
/* Lists */
.list-item { display: flex; align-items: flex-start; justify-content: space-between; padding: 15px 25px; border-bottom: 1px solid #f1f1f4; }
.list-item:last-child { border-bottom: none; }
.item-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 50%; font-size: 16px; color: #9ca3af; flex-shrink: 0; }
.item-info { flex: 1; margin-left: 15px; padding-top: 2px; }
.item-title { font-size: 13px; font-weight: 600; color: #111; margin: 0 0 4px 0; display:flex; align-items:center; gap:10px; }
.item-desc { font-size: 12px; color: #777; margin: 0; line-height: 1.5; }
.item-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 20px; padding-top: 10px; }
/* Toggle */
.toggle-switch { position: relative; width: 34px; height: 20px; background: #3b82f6; border-radius: 20px; cursor: pointer; display: inline-block; vertical-align: middle; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: 0.2s;}
.toggle-switch.off { background: #e5e7eb; }
.toggle-switch.off::after { left: 2px; right: auto; }
/* KV Row */
.kv-row { display: flex; align-items: center; justify-content: space-between; }
.kv-key { width: 120px; color: #555; font-weight: 500; font-size: 13px; flex-shrink: 0; }
.kv-value { flex: 1; color: #111; font-weight: 500; font-size: 13px; }
.btn-icon { background: none; border: none; color: #999; cursor: pointer; font-size: 14px; transition: 0.2s; }
.btn-icon:hover { color: #3b82f6; }
/* Table */
.modern-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.modern-table th { text-align: left; padding: 12px 25px; color: #777; font-weight: 600; border-bottom: 1px dashed #e5e7eb; }
.modern-table td { padding: 15px 25px; border-bottom: 1px dashed #e5e7eb; color: #333; font-weight: 500; vertical-align: middle; }
.modern-table tbody tr:last-child td { border-bottom: none; }
/* Info Box */
.info-box { padding: 30px; border-bottom: 1px dashed #e5e7eb; }
.info-box:last-child { border-bottom: none; }
.info-icon { width: 40px; height: 40px; background: #eff6ff; color: #3b82f6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 20px; }
.info-title { font-size: 14px; font-weight: 700; color: #111; margin: 0 0 10px 0; line-height: 1.4; }
.info-desc { font-size: 13px; color: #777; margin: 0 0 15px 0; line-height: 1.6; }
.info-link { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #3b82f6; text-decoration: none; display:inline-block; }
.info-link:hover { text-decoration: underline; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from security-privacy-settings.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-filled { border: none; background: #3b82f6; color: #fff; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-filled:hover { background: #2a6ae2; }
/* Grid */
.billing-grid { display: grid; grid-template-columns: 2.2fr 1fr; gap: 25px; align-items: start; }
@media (max-width: 900px) { .billing-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 25px; }
.card-body { padding: 25px; }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 14px; font-weight: 600; color: #111; margin: 0; display:flex; align-items:center; gap: 10px; }
/* Badges */
.badge { padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.badge.blue { background: #e0e7ff; color: #3b82f6; }
.badge.purple { background: #f3e8ff; color: #a855f7; }
.badge.red-outline { border: 1px solid #fca5a5; color: #ef4444; background: #fff; }
/* Lists */
.list-item { display: flex; align-items: flex-start; justify-content: space-between; padding: 15px 25px; border-bottom: 1px solid #f1f1f4; }
.list-item:last-child { border-bottom: none; }
.item-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 50%; font-size: 16px; color: #9ca3af; flex-shrink: 0; }
.item-info { flex: 1; margin-left: 15px; padding-top: 2px; }
.item-title { font-size: 13px; font-weight: 600; color: #111; margin: 0 0 4px 0; display:flex; align-items:center; gap:10px; }
.item-desc { font-size: 12px; color: #777; margin: 0; line-height: 1.5; }
.item-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 20px; padding-top: 10px; }
/* Toggle */
.toggle-switch { position: relative; width: 34px; height: 20px; background: #3b82f6; border-radius: 20px; cursor: pointer; display: inline-block; vertical-align: middle; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: 0.2s;}
.toggle-switch.off { background: #e5e7eb; }
.toggle-switch.off::after { left: 2px; right: auto; }
/* Sub-Cards Grid */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
@media (max-width: 650px) { .split-grid { grid-template-columns: 1fr; } }
.split-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; }
.split-card h3 { font-size: 14px; font-weight: 700; color: #111; margin: 0 0 20px 0; }
.row-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px dashed #f1f1f4; }
.row-item:last-child { border-bottom: none; padding-bottom: 0; }
.row-item:first-of-type { padding-top: 0; }
.row-info h4 { margin: 0 0 4px 0; font-size: 13px; font-weight: 600; color: #111; }
.row-info p { margin: 0; font-size: 12px; color: #777; }
.radio-circle { width: 16px; height: 16px; border: 2px solid #ccc; border-radius: 50%; display: inline-block; vertical-align: middle; cursor: pointer; }
.radio-circle.active { border-color: #3b82f6; border-width: 5px; }
/* FAQ Accordion */
.faq-item { border-bottom: 1px solid #f1f1f4; padding: 18px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-item:last-child { border-bottom: none; }
.faq-title { font-size: 13px; font-weight: 500; color: #333; }
.faq-icon { font-size: 14px; color: #aaa; }
/* Input Group */
.input-group { display: flex; margin-bottom: 20px; }
.input-group input { flex: 1; border: 1px solid #e5e7eb; border-radius: 6px 0 0 6px; padding: 10px 15px; font-size: 13px; outline: none; }
.input-group input:focus { border-color: #bbf; }
.input-group button { background: #3b82f6; color: #fff; border: none; border-radius: 0 6px 6px 0; padding: 0 20px; font-size: 13px; font-weight: 600; cursor: pointer; }
/* User List */
.user-list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.user-list-left { display: flex; align-items: center; gap: 12px; }
.user-list-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.user-list-name { font-size: 13px; font-weight: 600; color: #111; margin: 0; }
.user-list-meta { font-size: 11px; color: #777; margin: 0; }
.btn-icon { background: none; border: none; color: #aaa; cursor: pointer; font-size: 14px; padding: 5px; transition: 0.2s; }
.btn-icon:hover { color: #ef4444; }
/* Info Box */
.info-box { padding: 30px; border-bottom: 1px dashed #e5e7eb; }
.info-box:last-child { border-bottom: none; }
.info-icon { width: 40px; height: 40px; background: #eff6ff; color: #3b82f6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 20px; }
.info-title { font-size: 14px; font-weight: 700; color: #111; margin: 0 0 10px 0; line-height: 1.4; }
.info-desc { font-size: 13px; color: #777; margin: 0 0 15px 0; line-height: 1.6; }
.info-link { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #3b82f6; text-decoration: none; display:inline-block; }
.info-link:hover { text-decoration: underline; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from settings-enterprise.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.header-btns { display: flex; gap: 10px; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-filled { border: none; background: #3b82f6; color: #fff; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-filled:hover { background: #2a6ae2; }
.btn-dark { border: none; background: #111; color: #fff; padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-dark:hover { background: #333; }
/* Promo Banner */
.promo-banner { background: #fff url('data:image/svg+xml,%3Csvg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M50 0l43.3 25v50L50 100 6.7 75V25z\' fill-opacity=\'0.03\' fill=\'%23111\' fill-rule=\'evenodd\'/%3E%3C/svg%3E') right center / contain no-repeat; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.promo-icon { width: 48px; height: 48px; background: #f0f4ff; color: #3b82f6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.promo-content { flex: 1; margin-left: 20px; }
.promo-content h3 { margin: 0 0 5px 0; font-size: 15px; font-weight: 600; color: #111; display:flex; align-items:center; gap:10px; }
.promo-badge { background: #f1f1f4; color: #555; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; }
.promo-content p { margin: 0; font-size: 13px; color: #555; line-height: 1.5; max-width: 700px; }
.promo-actions { display: flex; align-items: center; gap: 15px; }
.promo-actions a { color: #555; font-size: 13px; font-weight: 600; text-decoration: none; }
.promo-actions a:hover { color: #111; }
/* Grid Layout */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: start; }
/* Cards & Lists */
.card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 1px 2px rgba(0,0,0,0.01); }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f9f9f9; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 15px; font-weight: 600; color: #111; margin: 0; }
.card-body { padding: 5px 25px 20px 25px; }
.list-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px dashed #f1f1f4; }
.list-row:last-child { border-bottom: none; }
.list-label { flex: 0 0 160px; color: #555; font-size: 13px; font-weight: 500; display: flex; align-items: center; }
.list-content { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.list-text { color: #333; font-size: 13px; font-weight: 500; line-height: 1.5; }
.list-text.muted { color: #777; font-weight: 400; font-size: 11px; }
.edit-btn { background: #f4f6fa; border: none; color: #3b82f6; width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; }
.edit-btn:hover { background: #e0e6f6; }
.text-btn { color: #3b82f6; font-size: 13px; text-decoration: none; font-weight: 500; }
.text-btn:hover { text-decoration: underline; color: #2a6ae2; }
/* Utilities */
.badge-green { background: #e8fff3; color: #50cd89; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; display: inline-block; }
.toggle-switch-container { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; font-weight: 600; }
.toggle-switch { position: relative; width: 34px; height: 20px; background: #3b82f6; border-radius: 20px; cursor: pointer; transition: background 0.2s; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: right 0.2s; }
.toggle-switch.off { background: #e5e7eb; }
.toggle-switch.off::after { right: 16px; }
.social-logos { display: flex; gap: 8px; align-items: center; font-size: 16px; color: #555; }
.social-logos i.fa-google { color: #ea4335; }
.social-logos i.fa-facebook { color: #1877f2; }
.social-logos i.fa-apple { color: #000; }
.avatar-upload-preview { width: 44px; height: 44px; border-radius: 50%; background: #e8fff3; position: relative; display: flex; align-items: center; justify-content: center; }
.avatar-upload-preview img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-upload-preview .badge { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; background: #50cd89; border-radius: 50%; border: 2px solid #fff; }
/* Plan Banner Layout */
.plan-feature-layout { display: flex; gap: 30px; align-items: center; }
.plan-banner-box { width: 220px; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; text-align: center; }
.plan-banner-box .img-placeholder { width: 100%; height: 130px; background: #ffeded; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; color: #ff5b5b; font-size: 40px; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.05); }
.plan-banner-box h4 { margin: 0 0 5px 0; font-size: 14px; font-weight: 600; color: #111; }
.plan-banner-box p { margin: 0 0 20px 0; font-size: 12px; color: #777; line-height: 1.4; }
.plan-features-list { flex: 1; }
.plan-feature-item { margin-bottom: 20px; }
.plan-feature-item:last-child { margin-bottom: 0; }
.plan-feature-item h5 { margin: 0 0 5px 0; font-size: 13px; font-weight: 600; color: #111; }
.plan-feature-item p { margin: 0 0 8px 0; font-size: 12px; color: #777; line-height: 1.4; }
/* Progress Goal Card */
.goal-header { display: flex; align-items: center; justify-content: space-between; border: 1px dashed #e5e7eb; border-radius: 8px; padding: 15px; margin: 15px 0; }
.goal-header-left { display: flex; align-items: center; gap: 15px; }
.goal-header-left h3 { margin: 0; font-size: 24px; font-weight: 700; color: #111; }
.goal-header-left p { margin: 0; font-size: 12px; font-weight: 500; color: #555; }
.progress-container { margin-top: 15px; }
.progress-info { display: flex; justify-content: space-between; font-size: 12px; color: #111; font-weight: 600; margin-bottom: 8px; }
.progress-bar-bg { width: 100%; height: 6px; background: #f1f1f4; border-radius: 3px; position: relative; }
.progress-bar-fill { height: 100%; background: #3b82f6; border-radius: 3px; width: 33%; }
.progress-labels { display: flex; justify-content: space-between; font-size: 10px; color: #999; margin-top: 5px; font-weight: 500; }
.progress-labels span { display: inline-block; background: #f9f9f9; padding: 2px 6px; border-radius: 4px; border: 1px solid #eee; }
/* Table Elements */
.basic-table { width: 100%; border-collapse: collapse; }
.basic-table th { text-align: left; font-size: 12px; color: #999; font-weight: 500; padding: 12px 0; border-bottom: 1px solid #f1f1f4; }
.basic-table td { padding: 12px 0; border-bottom: 1px dashed #f1f1f4; vertical-align: middle; font-size: 13px; color: #333; font-weight: 500;}
.basic-table tr:last-child td { border-bottom: none; }
.table-muted { color: #777; font-weight: 400; }
.member-name { display: flex; align-items: center; gap: 12px; }
.member-name img { width: 32px; height: 32px; border-radius: 50%; }
.member-info h5 { font-size: 13px; font-weight: 600; color: #333; margin: 0 0 2px 0; }
.member-info span { font-size: 11px; color: #777; font-weight: 400;}
.btn-icon-check { width: 24px; height: 24px; background: #3b82f6; color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; border: none; }
/* Devices List */
.device-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px dashed #f1f1f4; }
.device-row:last-child { border-bottom: none; }
.device-left { display: flex; align-items: center; gap: 15px; }
.device-icon i { font-size: 24px; }
.device-info h5 { margin: 0 0 4px 0; font-size: 13px; font-weight: 600; color: #111; }
.device-info p { margin: 0; font-size: 12px; color: #777; }
.device-location { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #555; }
/* Calendars List */
.calendar-row { display: flex; justify-content: space-between; align-items: center; padding: 15px; border: 1px solid #f1f1f4; border-radius: 8px; margin-top: 15px; }
h2 { font-family: 'Inter', sans-serif;}
@media(max-width: 1024px) {
.grid-2col { grid-template-columns: 1fr; }
.plan-feature-layout { flex-direction: column; align-items: stretch; }
.plan-banner-box { width: 100%; }
}
/* --- CSS from settings-modal.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.header-btns { display: flex; gap: 10px; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-filled { border: none; background: #3b82f6; color: #fff; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-filled:hover { background: #2a6ae2; }
/* Modal Styles */
.modal-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.5); z-index: 1000;
display: flex; justify-content: center; align-items: center;
opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.modal-overlay.active {
opacity: 1; visibility: visible;
}
.modal-container {
background: #f8fafc; border-radius: 12px; width: 90%; max-width: 900px; max-height: 90vh;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
display: flex; flex-direction: column; overflow: hidden;
transform: translateY(20px); transition: transform 0.3s ease;
}
.modal-overlay.active .modal-container {
transform: translateY(0);
}
.modal-header {
padding: 20px 25px; border-bottom: 1px solid #e5e7eb; background: #fff;
display: flex; justify-content: space-between; align-items: center;
}
.modal-header h3 { margin: 0; font-size: 18px; color: #111; font-weight: 600; }
.modal-close {
background: none; border: none; font-size: 20px; color: #999; cursor: pointer; transition: color 0.2s;
}
.modal-close:hover { color: #111; }
.modal-body {
padding: 25px; overflow-y: auto; flex: 1; background: #f8fafc;
}
/* Settings Forms Inside Modal */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 25px; }
.card-body { padding: 25px; }
.form-group-row { display: flex; align-items: flex-start; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #f1f1f4; }
.form-group-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.row-label { flex: 0 0 200px; padding-top: 8px; color: #555; font-size: 13px; font-weight: 600; }
.row-content { flex: 1; }
.form-input { width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 13px; font-family: 'Inter', sans-serif; color: #333; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.form-input:focus { border-color: #3b82f6; }
.avatar-upload-preview { width: 44px; height: 44px; border-radius: 50%; background: #e8fff3; position: relative; display: flex; align-items: center; justify-content: center; }
.avatar-upload-preview img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.toggle-switch-container { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; font-weight: 600; }
.toggle-switch { position: relative; width: 34px; height: 20px; background: #3b82f6; border-radius: 20px; cursor: pointer; transition: background 0.2s; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: right 0.2s; }
.toggle-switch.off { background: #e5e7eb; }
.toggle-switch.off::after { right: 16px; }
.btn-icon { background: none; border: none; color: #999; cursor: pointer; font-size: 14px; }
.btn-icon:hover { color: #dc2626; }
.social-row { display: flex; justify-content: space-between; align-items: center; padding: 15px; border: 1px solid #f1f1f4; border-radius: 8px; margin-bottom: 10px; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from settings-plain.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Plain Container */
.plain-container { max-width: 800px; margin: 0 auto; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.header-btns { display: flex; gap: 10px; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-filled { border: none; background: #3b82f6; color: #fff; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-filled:hover { background: #2a6ae2; }
.btn-danger { border: none; background: #dc2626; color: #fff; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-danger:hover { background: #b91c1c; }
/* Cards & Forms */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 1px 2px rgba(0,0,0,0.01); }
.card-header { padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 15px; font-weight: 600; color: #111; margin: 0; }
.card-body { padding: 5px 25px 25px 25px; }
.form-group-row { display: flex; align-items: flex-start; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #f1f1f4; }
.form-group-row:last-child { border-bottom: none; margin-bottom: 20px; padding-bottom: 0; }
.row-label { flex: 0 0 200px; padding-top: 8px; color: #555; font-size: 13px; font-weight: 500; }
.row-content { flex: 1; }
.form-input { width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 13px; font-family: 'Inter', sans-serif; color: #333; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.form-input:focus { border-color: #3b82f6; }
.color-input-wrapper { display: flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px 10px; gap: 10px; }
.color-swatch { width: 20px; height: 20px; background: #65a30d; border-radius: 4px; }
.color-text { font-size: 13px; color: #555; border: none; outline: none; flex: 1; }
.upload-box { border: 1px dashed #cbd5e1; border-radius: 8px; padding: 30px 20px; text-align: center; background: #f8fafc; cursor: pointer; transition: all 0.2s; }
.upload-box:hover { border-color: #3b82f6; background: #f0f4ff; }
.upload-icon { font-size: 24px; color: #3b82f6; margin-bottom: 10px; }
.upload-text { font-size: 13px; color: #333; font-weight: 500; margin-bottom: 5px; }
.upload-subtext { font-size: 11px; color: #777; }
/* Editor Simulation */
.editor-wrapper { border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; }
.editor-toolbar { padding: 8px 12px; background: #f9f9f9; border-bottom: 1px solid #e5e7eb; display: flex; gap: 15px; align-items: center; color: #555; font-size: 13px; }
.editor-toolbar span { cursor: pointer; }
.editor-toolbar span:hover { color: #111; }
.editor-content textarea { width: 100%; min-height: 120px; border: none; padding: 12px; font-size: 13px; font-family: 'Inter', sans-serif; resize: vertical; outline: none; box-sizing: border-box; }
.editor-footer { padding: 8px 12px; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; font-size: 11px; color: #999; }
/* Utilities */
.toggle-switch-container { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; font-weight: 600; }
.toggle-switch { position: relative; width: 34px; height: 20px; background: #3b82f6; border-radius: 20px; cursor: pointer; transition: background 0.2s; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: right 0.2s; }
.toggle-switch.off { background: #e5e7eb; }
.toggle-switch.off::after { right: 16px; }
.avatar-upload-preview { width: 44px; height: 44px; border-radius: 50%; background: #e8fff3; position: relative; display: flex; align-items: center; justify-content: center; }
.avatar-upload-preview img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-upload-preview .badge { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; background: #50cd89; border-radius: 50%; border: 2px solid #fff; }
.checkbox-container { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #333; margin-top: 20px; margin-bottom: 20px; }
.checkbox-container input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
@media(max-width: 768px) {
.form-group-row { flex-direction: column; }
.row-label { flex: none; margin-bottom: 8px; padding-top: 0; }
}
/* --- CSS from settings-sidebar.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Settings Layout */
.settings-container { max-width: 900px; margin: 0 auto; }
/* Cards */
.card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); overflow: hidden; }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f9f9f9; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 16px; font-weight: 600; color: #111; margin: 0; }
.card-body { padding: 25px; }
.card-footer { padding: 15px 25px; background: #fdfdfd; border-top: 1px solid #f9f9f9; text-align: right; }
.btn-filled { border: none; background: #3b82f6; color: #fff; padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-filled:hover { background: #2a6ae2; }
/* Form Elements */
.form-group { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 30px; }
.form-label { flex: 0 0 220px; font-size: 13px; font-weight: 600; color: #333; padding-top: 10px; }
.form-label p { margin: 5px 0 0 0; font-size: 11px; font-weight: 400; color: #777; line-height: 1.4; }
.form-control { flex: 1; min-width: 0; }
.input-text { width: 100%; border: 1px solid #e5e7eb; padding: 10px 15px; border-radius: 8px; font-size: 13px; outline: none; color: #333; transition: border-color 0.2s; background: #fff; font-family: 'Inter', sans-serif; }
.input-text:focus { border-color: #3b82f6; }
.input-text::placeholder { color: #aaa; }
.select-input { width: 100%; border: 1px solid #e5e7eb; padding: 10px 15px; border-radius: 8px; font-size: 13px; outline: none; background: #fff url('data:image/svg+xml;utf8,') no-repeat right 8px center; appearance: none; color: #333; font-family: 'Inter', sans-serif;}
/* File upload */
.file-upload-box { border: 1px dashed #3b82f6; background: #f5f8ff; border-radius: 8px; padding: 30px; text-align: center; }
.file-upload-box i { font-size: 24px; color: #3b82f6; margin-bottom: 10px; }
.file-upload-box p { font-size: 13px; color: #555; margin: 0 0 15px 0; font-weight: 500; }
.btn-sm-primary { background: #3b82f6; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
/* Editor */
.editor-toolbar { border: 1px solid #e5e7eb; border-bottom: none; border-radius: 8px 8px 0 0; background: #fdfdfd; padding: 10px 15px; display: flex; gap: 15px; align-items: center; color: #555; font-size: 13px; }
.editor-toolbar i { cursor: pointer; }
.editor-toolbar i:hover { color: #3b82f6; }
.editor-textarea { width: 100%; border: 1px solid #e5e7eb; border-radius: 0 0 8px 8px; padding: 15px; font-size: 13px; min-height: 120px; outline: none; resize: vertical; font-family: 'Inter', sans-serif; color:#333; }
.editor-footer { text-align: right; font-size: 11px; color: #999; margin-top: 5px; }
/* Radio/Checkboxes */
.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #333; cursor: pointer; }
.radio-item input { margin: 0; accent-color: #3b82f6; }
.radio-inline { display: flex; gap: 20px; align-items: center; }
/* Toggle */
.toggle-switch { position: relative; width: 34px; height: 20px; background: #3b82f6; border-radius: 20px; cursor: pointer; display: inline-block; vertical-align: middle; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: 0.2s;}
.toggle-switch.off { background: #e5e7eb; }
.toggle-switch.off::after { left: 2px; right: auto; }
.toggle-label-wrap { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #333; }
/* Avatar Preview */
.avatar-preview { width: 60px; height: 60px; border-radius: 50%; background: #e8fff3; display: flex; align-items: center; justify-content: center; position: relative; }
.avatar-preview i { font-size: 30px; color: #10b981; }
.avatar-preview .edit-badge { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; font-size: 10px; color: #3b82f6; }
/* Badges & Addons */
.badge-green { background: #e8fff3; color: #50cd89; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; display: inline-block; }
.input-with-btn { display: flex; gap: 10px; }
/* SSO Cards */
.sso-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
.sso-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: #fdfdfd; }
.sso-card:hover { border-color: #3b82f6; }
.sso-card.active { border-color: #3b82f6; background: #f0f4ff; box-shadow: 0 0 0 1px #3b82f6; }
.sso-card i { font-size: 28px; margin-bottom: 10px; }
.sso-card p { margin: 0; font-size: 12px; font-weight: 600; color: #333; }
/* Theme Cards */
.theme-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 25px; }
.theme-card { cursor: pointer; }
.theme-preview { border: 1px solid #e5e7eb; border-radius: 8px; height: 100px; margin-bottom: 10px; overflow: hidden; position: relative; background: #f9f9f9; display: flex; align-items: center; justify-content: center; }
.theme-card.active .theme-preview { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; }
.theme-preview.dark-mock { background: #1e1e2d; }
.theme-preview.dark-mock .mock-ui { border-color: #333; background:#111; }
.theme-preview.light-mock { background: #f4f6fa; }
.theme-preview.light-mock .mock-ui { border-color: #eee; background:#fff; }
.theme-preview.system-mock { background: linear-gradient(135deg, #f4f6fa 50%, #1e1e2d 50%); }
.mock-ui { width: 80%; height: 60px; border-radius: 4px; border: 1px solid #ccc; background: #fff; padding: 5px;}
.mock-line { height: 4px; background: #e5e7eb; border-radius: 2px; margin-bottom: 4px; }
.mock-line.w-50 { width: 50%; }
.mock-line.w-80 { width: 80%; }
.theme-card p { margin: 0; font-size: 13px; font-weight: 600; color: #333; text-align: center; }
/* Integration Row */
.integration-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px dashed #f1f1f4; }
.integration-row:last-child { border-bottom: none; }
.integration-left { display: flex; align-items: center; gap: 15px; }
.integration-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #f9f9f9; border-radius: 8px; font-size: 20px; }
.integration-info h5 { margin: 0 0 3px 0; font-size: 13px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 10px; }
.integration-info h5 span { font-weight: 400; color: #777; font-size: 12px; }
.integration-info p { margin: 0; font-size: 12px; color: #777; }
.integration-actions { display: flex; align-items: center; gap: 15px; }
/* Social Sign In */
.social-sign-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e5e7eb; background: #fff; padding: 6px 15px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #333; cursor: pointer; transition: background 0.2s; }
.social-sign-btn:hover { background: #f9f9f9; }
/* Delete Card */
.delete-card { border-top: 3px solid #ef4444 !important; }
.btn-danger { background: #ef4444; color: white; border: none; padding: 8px 15px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-danger:hover { background: #dc2626; }
.btn-light-danger { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; padding: 8px 15px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; margin-right: 10px; }
.btn-light-danger:hover { background: #fee2e2; }
/* Quick Lists */
.notification-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
.notif-card { border: 1px solid #f1f1f4; padding: 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
.notif-info { display: flex; align-items: center; gap: 15px; }
.notif-info i { font-size: 20px; color: #a1a5b7; }
.notif-info h4 { margin: 0 0 2px 0; font-size: 13px; font-weight: 600; color: #333; }
.notif-info p { margin: 0; font-size: 11px; color: #777; }
@media(max-width: 768px) {
.form-group { flex-direction: column; gap: 10px; }
.form-label { flex: none; width: 100%; padding-top: 0; }
.sso-cards, .theme-cards, .notification-cards { grid-template-columns: 1fr; }
}
/* --- CSS from store-checkout-order-placed.html --- */
/* Store Specific Topbar */
.store-topbar { padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; background: #fff; }
.store-breadcrumb { font-size: 14px; color: #777; font-weight: 500; }
.store-breadcrumb span { color: #111; font-weight: 600; }
.store-topbar-right { display: flex; align-items: center; gap: 20px; }
.store-icon-btn { font-size: 18px; color: #555; cursor: pointer; text-decoration: none; position: relative; display: flex; align-items: center; gap: 10px; }
.store-icon-btn:hover { color: #3b82f6; }
.cart-badge { position: absolute; top: -8px; left: 10px; background: #22c55e; color: #fff; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cart-text { display: flex; flex-direction: column; font-size: 11px; color: #777; font-weight: 500; }
.cart-total { font-size: 13px; font-weight: 700; color: #111; }
.main-store-content { padding: 30px; background: #fff; flex: 1; overflow-y: auto; }
/* Global Footer */
.footer { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid #f1f1f4; font-size: 12px; color: #777; margin-top: 40px; }
.footer-links a { color: #555; text-decoration: none; margin-left: 15px; font-weight: 500; }
.footer-links a:hover { color: #3b82f6; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* Checkout Steps */
.checkout-steps { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 40px; padding-top: 20px; }
.checkout-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #555; padding: 8px 16px; border-radius: 20px; background: #fff; border: 1px solid #e5e7eb; }
.checkout-step.active { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
.checkout-step.completed { color: #555; border-color: #e5e7eb; }
.checkout-step.completed .fa-circle-check { color: #22c55e; font-size: 14px; margin-left: 4px; }
.checkout-step i { font-size: 14px; }
.step-divider { width: 40px; height: 1px; border-top: 1px dashed #ccc; }
/* Checkout Layout */
.checkout-layout { display: flex; gap: 30px; align-items: flex-start; }
.checkout-left { flex: 1; }
.checkout-right { width: 320px; flex-shrink: 0; background: #f9f9fb; border-radius: 12px; padding: 25px; border: 1px solid #f1f1f4; }
.checkout-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.checkout-header h2 { margin: 0 0 5px 0; font-size: 20px; color: #111; font-weight: 700; }
.checkout-header p { margin: 0; font-size: 13px; color: #777; }
.btn-outline-sm { padding: 8px 16px; font-size: 13px; font-weight: 600; color: #555; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;}
.btn-outline-sm:hover { background: #f9f9fb; }
.btn-primary { padding: 10px 20px; font-size: 13px; font-weight: 600; color: #fff; background: #3b82f6; border: none; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;}
.btn-primary:hover { background: #2563eb; }
/* Order Details Block */
.order-details-block { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; margin-bottom: 30px; overflow: hidden; }
.order-info-header { background: #f9f9fb; padding: 20px 25px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; border-bottom: 1px solid #e5e7eb; }
.info-col-title { font-size: 11px; color: #777; margin-bottom: 5px; font-weight: 600; }
.info-col-value { font-size: 13px; color: #111; font-weight: 700; }
.order-items-list { padding: 25px; display: flex; flex-direction: column; gap: 15px; }
.order-item-row { display: flex; align-items: center; justify-content: space-between; padding: 15px; border: 1px solid #f1f1f4; border-radius: 12px; }
.item-info { display: flex; align-items: center; gap: 15px; }
.item-img-wrap { width: 50px; height: 50px; background: #f9f9fb; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.item-img-wrap img { max-width: 90%; max-height: 90%; object-fit: contain; mix-blend-mode: multiply; }
.item-details h4 { margin: 0 0 5px 0; font-size: 13px; color: #111; font-weight: 600; }
.item-sku { font-size: 11px; color: #777; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.item-badge { background: #dc2626; color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 700; font-size: 9px; }
.item-pricing { text-align: right; }
.item-qty { font-size: 12px; color: #777; margin-bottom: 5px; }
.item-price { font-size: 14px; font-weight: 700; color: #111; }
.item-old-price { font-size: 12px; color: #999; text-decoration: line-through; margin-right: 5px; }
/* Grid Cards Bottom */
.order-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.order-info-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; background: #fff; }
.order-info-card-title { font-size: 12px; font-weight: 700; color: #111; margin: 0 0 15px 0; padding-bottom: 15px; border-bottom: 1px solid #f1f1f4; }
.order-info-content { font-size: 13px; color: #555; line-height: 1.6; }
.payment-details-wrap { display: flex; gap: 15px; align-items: center; }
.payment-icon { font-size: 30px; color: #1a1f71; width: 45px; }
.payment-name { font-weight: 600; color: #111; display: block; margin-bottom: 3px; }
.address-name { font-weight: 600; color: #111; margin-bottom: 5px; display: block;}
/* Order Summary Box */
.summary-title { font-size: 15px; font-weight: 700; color: #111; margin: 0 0 20px 0; }
.summary-subtitle { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 15px; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; color: #555; margin-bottom: 10px; }
.summary-row.total { font-size: 14px; font-weight: 700; color: #111; border-top: 1px solid #e5e7eb; padding-top: 15px; margin-top: 15px; }
@media(max-width: 900px) {
.checkout-layout { flex-direction: column; }
.checkout-right { width: 100%; }
.checkout-steps { flex-wrap: wrap; }
.step-divider { display: none; }
.order-cards-grid { grid-template-columns: 1fr; }
.order-info-header { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 600px) {
.order-info-header { grid-template-columns: 1fr; }
.checkout-header { flex-direction: column; align-items: flex-start; gap: 15px; }
}
/* --- CSS from store-checkout-order-summary.html --- */
/* Store Specific Topbar */
.store-topbar { padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; background: #fff; }
.store-breadcrumb { font-size: 14px; color: #777; font-weight: 500; }
.store-breadcrumb span { color: #111; font-weight: 600; }
.store-topbar-right { display: flex; align-items: center; gap: 20px; }
.store-icon-btn { font-size: 18px; color: #555; cursor: pointer; text-decoration: none; position: relative; display: flex; align-items: center; gap: 10px; }
.store-icon-btn:hover { color: #3b82f6; }
.cart-badge { position: absolute; top: -8px; left: 10px; background: #22c55e; color: #fff; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cart-text { display: flex; flex-direction: column; font-size: 11px; color: #777; font-weight: 500; }
.cart-total { font-size: 13px; font-weight: 700; color: #111; }
.main-store-content { padding: 30px; background: #fff; flex: 1; overflow-y: auto; }
/* Hero Search */
.hero-search { background: #f9f9fb; border-radius: 12px; padding: 60px 20px; display: flex; justify-content: center; align-items: center; margin-bottom: 40px; border: 1px solid #e5e7eb; background-image: radial-gradient(#e5e7eb 1px, transparent 1px); background-size: 20px 20px; }
.search-wrapper { position: relative; width: 100%; max-width: 500px; }
.search-input { width: 100%; padding: 15px 20px 15px 45px; border-radius: 8px; border: 1px solid #e5e7eb; font-size: 14px; outline: none; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #999; font-size: 16px; }
.search-shortcut { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: #f1f1f4; color: #555; font-size: 12px; padding: 4px 8px; border-radius: 4px; font-weight: 600; }
/* Brands */
.brands-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 15px; margin-bottom: 40px; }
.brand-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 15px; text-align: center; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: 0.2s; cursor: pointer; }
.brand-card:hover { border-color: #3b82f6; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.brand-name { font-size: 12px; font-weight: 600; color: #111; }
.brand-img { height: 35px; object-fit: contain; }
/* Sections */
.section-title-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-title { font-size: 16px; font-weight: 700; color: #111; margin: 0; }
.see-all { font-size: 12px; color: #3b82f6; font-weight: 600; text-decoration: none; }
.see-all:hover { text-decoration: underline; }
/* Special Offers */
.special-offers-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; margin-bottom: 40px; }
.offer-banner { border-radius: 12px; padding: 40px 30px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; background: #f3f0ff; }
.offer-banner .text-content { max-width: 50%; z-index: 2; }
.offer-badge { background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 15px; text-transform: uppercase; }
.offer-title { font-size: 22px; font-weight: 700; color: #111; margin-bottom: 10px; line-height: 1.2; }
.offer-desc { font-size: 13px; color: #555; margin-bottom: 20px; line-height: 1.5; }
.offer-btn { background: #111; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.offer-price { font-size: 14px; font-weight: 700; color: #111; margin-left: 15px; }
.offer-img { position: absolute; right: -10px; top: 50%; transform: translateY(-50%) rotate(-15deg); height: 220px; z-index: 1; }
.offer-card { border-radius: 12px; padding: 25px; text-align: center; position: relative; background: #e0f8e9; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.offer-card.blue { background: #e0f2fe; }
.offer-card .offer-img-small { height: 70px; object-fit: contain; margin-top: 15px; margin-bottom: 15px; }
.offer-card .offer-badge { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); }
.offer-card .offer-title { font-size: 14px; margin-top: 30px; margin-bottom: 10px; }
.offer-card .btn-outline { border: 1px solid #ccc; background: transparent; padding: 6px 12px; font-size: 12px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: #333; margin-bottom: 10px; }
.offer-card .offer-price { margin-left: 0; font-size: 13px; }
/* Products Grid */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
.product-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 15px; background: #fff; position: relative; display: flex; flex-direction: column; }
.product-img-wrap { background: #f9f9fb; border-radius: 8px; height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.product-img { max-height: 90px; max-width: 90%; object-fit: contain; }
.product-title { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 15px; line-height: 1.4; flex-grow: 1; }
.product-footer { display: flex; align-items: center; justify-content: space-between; }
.product-rating { display: inline-flex; align-items: center; gap: 4px; background: #fffbeb; color: #d97706; border: 1px solid #fde68a; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.product-price-wrap { display: flex; align-items: center; gap: 10px; }
.product-price { font-size: 13px; font-weight: 700; color: #111; }
.product-old-price { font-size: 11px; color: #999; text-decoration: line-through; }
.product-add { background: #fff; border: 1px solid #e5e7eb; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; color: #555; display: flex; align-items: center; gap: 5px; }
.product-add:hover { background: #f1f1f4; }
.product-badge-deal { position: absolute; top: 10px; right: 10px; background: #dc2626; color: #fff; font-size: 9px; font-weight: 700; padding: 3px 6px; border-radius: 4px; z-index: 2; text-transform: uppercase; }
/* Features */
.features-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 40px; }
.feature-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 15px; background: #fff; display: flex; align-items: center; gap: 15px; }
.feature-icon { width: 35px; height: 35px; border-radius: 8px; background: #eff6ff; color: #3b82f6; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;}
.feature-title { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 2px; }
.feature-desc { font-size: 11px; color: #777; }
/* Global Footer */
.footer { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid #f1f1f4; font-size: 12px; color: #777; }
.footer-links a { color: #555; text-decoration: none; margin-left: 15px; font-weight: 500; }
.footer-links a:hover { color: #3b82f6; }
/* Responsive */
@media(max-width: 1200px) {
.special-offers-grid { grid-template-columns: 1fr; }
.offer-img { right: 20px; }
.brands-row { grid-template-columns: repeat(4, 1fr); }
.products-grid { grid-template-columns: repeat(2, 1fr); }
.features-row { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 768px) {
.brands-row { grid-template-columns: repeat(2, 1fr); }
.products-grid { grid-template-columns: 1fr; }
.features-row { grid-template-columns: 1fr; }
.offer-banner { flex-direction: column; text-align: center; }
.offer-banner .text-content { max-width: 100%; margin-bottom: 20px; }
.offer-img { position: relative; transform: none; right: auto; top: auto; height: 150px; }
.store-topbar { flex-direction: column; gap: 15px; align-items: flex-start; }
}
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* Checkout Steps */
.checkout-steps { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 40px; padding-top: 20px; }
.checkout-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #555; padding: 8px 16px; border-radius: 20px; background: #fff; border: 1px solid #e5e7eb; }
.checkout-step.active { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
.checkout-step i { font-size: 14px; }
.step-divider { width: 40px; height: 1px; border-top: 1px dashed #ccc; }
/* Checkout Layout */
.checkout-layout { display: flex; gap: 30px; align-items: flex-start; }
.checkout-left { flex: 1; }
.checkout-right { width: 320px; flex-shrink: 0; background: #f9f9fb; border-radius: 12px; padding: 25px; border: 1px solid #f1f1f4; }
.checkout-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.checkout-header h2 { margin: 0 0 5px 0; font-size: 20px; color: #111; font-weight: 700; }
.checkout-header p { margin: 0; font-size: 13px; color: #777; }
.btn-view-cart { padding: 8px 16px; font-size: 13px; font-weight: 600; color: #555; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-view-cart:hover { background: #f9f9fb; }
/* Order Items */
.order-items { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
.order-item { display: flex; align-items: center; justify-content: space-between; padding: 15px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.item-info { display: flex; align-items: center; gap: 15px; }
.item-img-wrap { width: 60px; height: 60px; background: #f9f9fb; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.item-img-wrap img { max-width: 90%; max-height: 90%; object-fit: contain; mix-blend-mode: multiply; }
.item-details h4 { margin: 0 0 5px 0; font-size: 13px; color: #111; font-weight: 600; }
.item-sku { font-size: 11px; color: #777; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.item-badge { background: #dc2626; color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 700; font-size: 9px; }
.item-pricing { text-align: right; }
.item-qty { font-size: 12px; color: #777; margin-bottom: 5px; }
.item-price { font-size: 14px; font-weight: 700; color: #111; }
.item-old-price { font-size: 12px; color: #999; text-decoration: line-through; margin-right: 5px; }
/* Order Summary Box */
.summary-title { font-size: 15px; font-weight: 700; color: #111; margin: 0 0 20px 0; }
.summary-subtitle { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 15px; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; color: #555; margin-bottom: 10px; }
.summary-row.total { font-size: 14px; font-weight: 700; color: #111; border-top: 1px solid #e5e7eb; padding-top: 15px; margin-top: 15px; }
/* Action Buttons */
.checkout-actions { display: flex; justify-content: flex-end; gap: 15px; align-items: center; }
.btn-cancel { padding: 10px 20px; font-size: 13px; font-weight: 600; color: #555; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; }
.btn-cancel:hover { background: #f9f9fb; }
.btn-primary { padding: 10px 20px; font-size: 13px; font-weight: 600; color: #fff; background: #3b82f6; border: none; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.btn-primary:hover { background: #2563eb; }
@media(max-width: 900px) {
.checkout-layout { flex-direction: column; }
.checkout-right { width: 100%; }
.checkout-steps { flex-wrap: wrap; }
.step-divider { display: none; }
}
/* --- CSS from store-checkout-payment-method.html --- */
/* Store Specific Topbar */
.store-topbar { padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; background: #fff; }
.store-breadcrumb { font-size: 14px; color: #777; font-weight: 500; }
.store-breadcrumb span { color: #111; font-weight: 600; }
.store-topbar-right { display: flex; align-items: center; gap: 20px; }
.store-icon-btn { font-size: 18px; color: #555; cursor: pointer; text-decoration: none; position: relative; display: flex; align-items: center; gap: 10px; }
.store-icon-btn:hover { color: #3b82f6; }
.cart-badge { position: absolute; top: -8px; left: 10px; background: #22c55e; color: #fff; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cart-text { display: flex; flex-direction: column; font-size: 11px; color: #777; font-weight: 500; }
.cart-total { font-size: 13px; font-weight: 700; color: #111; }
.main-store-content { padding: 30px; background: #fff; flex: 1; overflow-y: auto; }
/* Global Footer */
.footer { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid #f1f1f4; font-size: 12px; color: #777; margin-top: 40px; }
.footer-links a { color: #555; text-decoration: none; margin-left: 15px; font-weight: 500; }
.footer-links a:hover { color: #3b82f6; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* Checkout Steps */
.checkout-steps { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 40px; padding-top: 20px; }
.checkout-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #555; padding: 8px 16px; border-radius: 20px; background: #fff; border: 1px solid #e5e7eb; }
.checkout-step.active { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
.checkout-step.completed { color: #555; border-color: #e5e7eb; }
.checkout-step.completed .fa-circle-check { color: #22c55e; font-size: 14px; margin-left: 4px; }
.checkout-step i { font-size: 14px; }
.step-divider { width: 40px; height: 1px; border-top: 1px dashed #ccc; }
/* Checkout Layout */
.checkout-layout { display: flex; gap: 30px; align-items: flex-start; }
.checkout-left { flex: 1; }
.checkout-right { width: 320px; flex-shrink: 0; background: #f9f9fb; border-radius: 12px; padding: 25px; border: 1px solid #f1f1f4; }
.checkout-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.checkout-header h2 { margin: 0 0 5px 0; font-size: 20px; color: #111; font-weight: 700; }
.checkout-header p { margin: 0; font-size: 13px; color: #777; }
.btn-outline-sm { padding: 8px 16px; font-size: 13px; font-weight: 600; color: #555; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;}
.btn-outline-sm:hover { background: #f9f9fb; }
/* Payment Grid */
.payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.payment-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; background: #fff; position: relative; display: flex; flex-direction: column; }
.payment-card.active { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; }
.payment-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; border-bottom: 1px solid #f1f1f4; padding-bottom: 15px; }
.payment-title { font-size: 14px; font-weight: 700; color: #111; margin: 0; }
.badge-pay { background: #dcfce7; color: #16a34a; font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 6px; }
.payment-details-wrap { display: flex; gap: 15px; align-items: center; margin-bottom: 20px; flex-grow: 1; }
.payment-icon { font-size: 30px; color: #111; width: 45px; }
.payment-icon.visa { color: #1a1f71; }
.payment-icon.paypal { color: #003087; }
.payment-icon.amex { color: #002663; }
.payment-icon.ideal { color: #cc0066; font-weight: 900; font-style: italic; font-size: 24px; }
.payment-info { font-size: 13px; color: #555; line-height: 1.4; }
.payment-name { font-weight: 600; color: #111; display: block; margin-bottom: 3px; }
.payment-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #f1f1f4; padding-top: 15px; }
.action-links { display: flex; gap: 15px; }
.action-link { font-size: 12px; font-weight: 600; color: #3b82f6; text-decoration: none; cursor: pointer; }
.action-link:hover { text-decoration: underline; }
.btn-select-card { padding: 6px 12px; font-size: 12px; font-weight: 600; color: #555; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; }
.btn-select-card:hover { background: #f9f9fb; }
/* Order Summary Box */
.summary-title { font-size: 15px; font-weight: 700; color: #111; margin: 0 0 20px 0; }
.summary-subtitle { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 15px; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; color: #555; margin-bottom: 10px; }
.summary-row.total { font-size: 14px; font-weight: 700; color: #111; border-top: 1px solid #e5e7eb; padding-top: 15px; margin-top: 15px; }
/* Action Buttons */
.checkout-actions { display: flex; justify-content: center; gap: 15px; align-items: center; margin-top: 30px; }
.btn-cancel { padding: 10px 20px; font-size: 13px; font-weight: 600; color: #555; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;}
.btn-cancel:hover { background: #f9f9fb; }
.btn-primary { padding: 10px 20px; font-size: 13px; font-weight: 600; color: #fff; background: #3b82f6; border: none; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;}
.btn-primary:hover { background: #2563eb; }
@media(max-width: 900px) {
.checkout-layout { flex-direction: column; }
.checkout-right { width: 100%; }
.checkout-steps { flex-wrap: wrap; }
.step-divider { display: none; }
.payment-grid { grid-template-columns: 1fr; }
}
/* --- CSS from store-checkout-shipping-info.html --- */
/* Store Specific Topbar */
.store-topbar { padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; background: #fff; }
.store-breadcrumb { font-size: 14px; color: #777; font-weight: 500; }
.store-breadcrumb span { color: #111; font-weight: 600; }
.store-topbar-right { display: flex; align-items: center; gap: 20px; }
.store-icon-btn { font-size: 18px; color: #555; cursor: pointer; text-decoration: none; position: relative; display: flex; align-items: center; gap: 10px; }
.store-icon-btn:hover { color: #3b82f6; }
.cart-badge { position: absolute; top: -8px; left: 10px; background: #22c55e; color: #fff; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cart-text { display: flex; flex-direction: column; font-size: 11px; color: #777; font-weight: 500; }
.cart-total { font-size: 13px; font-weight: 700; color: #111; }
.main-store-content { padding: 30px; background: #fff; flex: 1; overflow-y: auto; }
/* Global Footer */
.footer { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid #f1f1f4; font-size: 12px; color: #777; margin-top: 40px; }
.footer-links a { color: #555; text-decoration: none; margin-left: 15px; font-weight: 500; }
.footer-links a:hover { color: #3b82f6; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* Checkout Steps */
.checkout-steps { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 40px; padding-top: 20px; }
.checkout-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #555; padding: 8px 16px; border-radius: 20px; background: #fff; border: 1px solid #e5e7eb; }
.checkout-step.active { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
.checkout-step.completed { color: #555; border-color: #e5e7eb; }
.checkout-step.completed .fa-circle-check { color: #22c55e; font-size: 14px; margin-left: 4px; }
.checkout-step i { font-size: 14px; }
.step-divider { width: 40px; height: 1px; border-top: 1px dashed #ccc; }
/* Checkout Layout */
.checkout-layout { display: flex; gap: 30px; align-items: flex-start; }
.checkout-left { flex: 1; }
.checkout-right { width: 320px; flex-shrink: 0; background: #f9f9fb; border-radius: 12px; padding: 25px; border: 1px solid #f1f1f4; }
.checkout-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.checkout-header h2 { margin: 0 0 5px 0; font-size: 20px; color: #111; font-weight: 700; }
.checkout-header p { margin: 0; font-size: 13px; color: #777; }
.btn-outline-sm { padding: 8px 16px; font-size: 13px; font-weight: 600; color: #555; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;}
.btn-outline-sm:hover { background: #f9f9fb; }
/* Address Grid */
.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.address-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; background: #fff; position: relative; display: flex; flex-direction: column; }
.address-card.active { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; }
.address-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
.address-title { font-size: 14px; font-weight: 700; color: #111; margin: 0; }
.badge-ship { background: #dcfce7; color: #16a34a; font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 6px; }
.address-details { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
.address-name { font-weight: 600; color: #111; margin-bottom: 5px; display: block;}
.address-actions { display: flex; justify-content: space-between; align-items: center; }
.action-links { display: flex; gap: 15px; }
.action-link { font-size: 12px; font-weight: 600; color: #3b82f6; text-decoration: none; cursor: pointer; }
.action-link:hover { text-decoration: underline; }
.btn-select-address { padding: 6px 12px; font-size: 12px; font-weight: 600; color: #555; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; }
.btn-select-address:hover { background: #f9f9fb; }
/* Order Summary Box */
.summary-title { font-size: 15px; font-weight: 700; color: #111; margin: 0 0 20px 0; }
.summary-subtitle { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 15px; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; color: #555; margin-bottom: 10px; }
.summary-row.total { font-size: 14px; font-weight: 700; color: #111; border-top: 1px solid #e5e7eb; padding-top: 15px; margin-top: 15px; }
/* Action Buttons */
.checkout-actions { display: flex; justify-content: center; gap: 15px; align-items: center; margin-top: 30px; }
.btn-cancel { padding: 10px 20px; font-size: 13px; font-weight: 600; color: #555; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;}
.btn-cancel:hover { background: #f9f9fb; }
.btn-primary { padding: 10px 20px; font-size: 13px; font-weight: 600; color: #fff; background: #3b82f6; border: none; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;}
.btn-primary:hover { background: #2563eb; }
@media(max-width: 900px) {
.checkout-layout { flex-direction: column; }
.checkout-right { width: 100%; }
.checkout-steps { flex-wrap: wrap; }
.step-divider { display: none; }
.address-grid { grid-template-columns: 1fr; }
}
/* --- CSS from store-client-home.html --- */
/* Store Specific Topbar */
.store-topbar { padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; background: #fff; }
.store-breadcrumb { font-size: 14px; color: #777; font-weight: 500; }
.store-breadcrumb span { color: #111; font-weight: 600; }
.store-topbar-right { display: flex; align-items: center; gap: 20px; }
.store-icon-btn { font-size: 18px; color: #555; cursor: pointer; text-decoration: none; position: relative; display: flex; align-items: center; gap: 10px; }
.store-icon-btn:hover { color: #3b82f6; }
.cart-badge { position: absolute; top: -8px; left: 10px; background: #22c55e; color: #fff; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cart-text { display: flex; flex-direction: column; font-size: 11px; color: #777; font-weight: 500; }
.cart-total { font-size: 13px; font-weight: 700; color: #111; }
.main-store-content { padding: 30px; background: #fff; flex: 1; overflow-y: auto; }
/* Hero Search */
.hero-search { background: #f9f9fb; border-radius: 12px; padding: 60px 20px; display: flex; justify-content: center; align-items: center; margin-bottom: 40px; border: 1px solid #e5e7eb; background-image: radial-gradient(#e5e7eb 1px, transparent 1px); background-size: 20px 20px; }
.search-wrapper { position: relative; width: 100%; max-width: 500px; }
.search-input { width: 100%; padding: 15px 20px 15px 45px; border-radius: 8px; border: 1px solid #e5e7eb; font-size: 14px; outline: none; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #999; font-size: 16px; }
.search-shortcut { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: #f1f1f4; color: #555; font-size: 12px; padding: 4px 8px; border-radius: 4px; font-weight: 600; }
/* Brands */
.brands-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 15px; margin-bottom: 40px; }
.brand-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 15px; text-align: center; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: 0.2s; cursor: pointer; }
.brand-card:hover { border-color: #3b82f6; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.brand-name { font-size: 12px; font-weight: 600; color: #111; }
.brand-img { height: 35px; object-fit: contain; }
/* Sections */
.section-title-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-title { font-size: 16px; font-weight: 700; color: #111; margin: 0; }
.see-all { font-size: 12px; color: #3b82f6; font-weight: 600; text-decoration: none; }
.see-all:hover { text-decoration: underline; }
/* Special Offers */
.special-offers-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; margin-bottom: 40px; }
.offer-banner { border-radius: 12px; padding: 40px 30px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; background: #f3f0ff; }
.offer-banner .text-content { max-width: 50%; z-index: 2; }
.offer-badge { background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 15px; text-transform: uppercase; }
.offer-title { font-size: 22px; font-weight: 700; color: #111; margin-bottom: 10px; line-height: 1.2; }
.offer-desc { font-size: 13px; color: #555; margin-bottom: 20px; line-height: 1.5; }
.offer-btn { background: #111; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.offer-price { font-size: 14px; font-weight: 700; color: #111; margin-left: 15px; }
.offer-img { position: absolute; right: -10px; top: 50%; transform: translateY(-50%) rotate(-15deg); height: 220px; z-index: 1; }
.offer-card { border-radius: 12px; padding: 25px; text-align: center; position: relative; background: #e0f8e9; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.offer-card.blue { background: #e0f2fe; }
.offer-card .offer-img-small { height: 70px; object-fit: contain; margin-top: 15px; margin-bottom: 15px; }
.offer-card .offer-badge { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); }
.offer-card .offer-title { font-size: 14px; margin-top: 30px; margin-bottom: 10px; }
.offer-card .btn-outline { border: 1px solid #ccc; background: transparent; padding: 6px 12px; font-size: 12px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: #333; margin-bottom: 10px; }
.offer-card .offer-price { margin-left: 0; font-size: 13px; }
/* Products Grid */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
.product-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 15px; background: #fff; position: relative; display: flex; flex-direction: column; }
.product-img-wrap { background: #f9f9fb; border-radius: 8px; height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.product-img { max-height: 90px; max-width: 90%; object-fit: contain; }
.product-title { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 15px; line-height: 1.4; flex-grow: 1; }
.product-footer { display: flex; align-items: center; justify-content: space-between; }
.product-rating { display: inline-flex; align-items: center; gap: 4px; background: #fffbeb; color: #d97706; border: 1px solid #fde68a; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.product-price-wrap { display: flex; align-items: center; gap: 10px; }
.product-price { font-size: 13px; font-weight: 700; color: #111; }
.product-old-price { font-size: 11px; color: #999; text-decoration: line-through; }
.product-add { background: #fff; border: 1px solid #e5e7eb; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; color: #555; display: flex; align-items: center; gap: 5px; }
.product-add:hover { background: #f1f1f4; }
.product-badge-deal { position: absolute; top: 10px; right: 10px; background: #dc2626; color: #fff; font-size: 9px; font-weight: 700; padding: 3px 6px; border-radius: 4px; z-index: 2; text-transform: uppercase; }
/* Features */
.features-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 40px; }
.feature-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 15px; background: #fff; display: flex; align-items: center; gap: 15px; }
.feature-icon { width: 35px; height: 35px; border-radius: 8px; background: #eff6ff; color: #3b82f6; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;}
.feature-title { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 2px; }
.feature-desc { font-size: 11px; color: #777; }
/* Global Footer */
.footer { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid #f1f1f4; font-size: 12px; color: #777; }
.footer-links a { color: #555; text-decoration: none; margin-left: 15px; font-weight: 500; }
.footer-links a:hover { color: #3b82f6; }
/* Responsive */
@media(max-width: 1200px) {
.special-offers-grid { grid-template-columns: 1fr; }
.offer-img { right: 20px; }
.brands-row { grid-template-columns: repeat(4, 1fr); }
.products-grid { grid-template-columns: repeat(2, 1fr); }
.features-row { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 768px) {
.brands-row { grid-template-columns: repeat(2, 1fr); }
.products-grid { grid-template-columns: 1fr; }
.features-row { grid-template-columns: 1fr; }
.offer-banner { flex-direction: column; text-align: center; }
.offer-banner .text-content { max-width: 100%; margin-bottom: 20px; }
.offer-img { position: relative; transform: none; right: auto; top: auto; height: 150px; }
.store-topbar { flex-direction: column; gap: 15px; align-items: flex-start; }
}
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from team-info.html --- */
.account-nav { display:flex; gap:25px; border-bottom:1px solid #f1f1f4; margin-bottom:24px; overflow-x:auto; white-space:nowrap; padding-top:10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration:none; color:#555; font-size:13px; font-weight:500; display:inline-flex; align-items:center; gap:5px; position:relative; padding-bottom:14px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color:#3b5cff; font-weight:600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#3b5cff; }
.page-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
@media (max-width: 1100px) { .page-grid { grid-template-columns:1fr; } }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; margin-bottom:20px; overflow:hidden; }
.card-header { padding:14px 16px; border-bottom:1px solid #f1f1f4; display:flex; justify-content:space-between; align-items:center; }
.card-title { font-size:14px; font-weight:700; color:#111; }
.meta { font-size:11px; color:#6b7280; margin-top:2px; }
.btn-xs { border:1px solid #e5e7eb; background:#fff; color:#444; font-size:11px; padding:5px 8px; border-radius:6px; cursor:pointer; }
.info-table { width:100%; border-collapse:collapse; }
.info-table td { padding:10px 16px; border-bottom:1px dashed #e5e7eb; font-size:12px; vertical-align:top; }
.info-table tr:last-child td { border-bottom:none; }
.label { width:140px; color:#6b7280; }
.value { color:#111; }
.thumb-box { width:38px; height:38px; border-radius:50%; background:#d1fae5; display:inline-flex; align-items:center; justify-content:center; color:#10b981; border:1px solid #9ee6c5; }
.tag { display:inline-block; padding:4px 9px; border-radius:999px; background:#f3f4f6; color:#374151; font-size:11px; margin-right:6px; margin-bottom:4px; }
.toolbar { padding:12px 16px; border-bottom:1px solid #f1f1f4; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.search { position:relative; }
.search > i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#9ca3af; font-size:11px; }
.search input { border:1px solid #e5e7eb; border-radius:6px; padding:7px 10px 7px 28px; font-size:12px; width:170px; outline:none; }
.switch-wrap { display:flex; align-items:center; gap:8px; font-size:12px; color:#4b5563; }
.switch { position:relative; width:34px; height:18px; display:inline-block; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:#e5e7eb; border-radius:999px; }
.slider:before { content:""; position:absolute; width:14px; height:14px; left:2px; top:2px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.15); }
input:checked + .slider { background:#10b981; }
input:checked + .slider:before { transform:translateX(16px); }
.data-table { width:100%; border-collapse:collapse; min-width:700px; }
.data-table th { text-align:left; font-size:11px; color:#6b7280; font-weight:600; padding:10px 12px; border-bottom:1px solid #f1f1f4; }
.data-table td { font-size:12px; color:#111; padding:10px 12px; border-bottom:1px dashed #e5e7eb; }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; }
.dot.green { background:#10b981; } .dot.red { background:#ef4444; } .dot.blue { background:#3b82f6; }
.avatar-sm { width:26px; height:26px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.muted { color:#6b7280; font-size:11px; }
.pagination { padding:10px 12px; display:flex; justify-content:space-between; font-size:12px; color:#4b5563; }
.faq-item { padding:14px 16px; border-bottom:1px dashed #e5e7eb; display:flex; justify-content:space-between; font-size:12px; color:#111; }
.faq-item:last-child { border-bottom:none; }
.support { padding:14px 16px; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.support h3 { font-size:18px; margin-bottom:8px; }
.support p { font-size:12px; color:#6b7280; line-height:1.5; margin-bottom:8px; }
.support a { font-size:12px; color:#3b82f6; text-decoration:none; }
.ill { font-size:52px; color:#d1d5db; }
.side-card { padding:14px 16px; border-bottom:1px solid #f1f1f4; }
.side-card:last-child { border-bottom:none; }
.stats { font-size:24px; font-weight:700; color:#111; margin-bottom:6px; }
.link { color:#3b82f6; text-decoration:none; font-size:12px; }
.profile-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px dashed #e5e7eb; }
.profile-row:last-child { border-bottom:none; }
.tip-title { font-size:12px; color:#111; font-weight:600; margin-bottom:6px; line-height:1.4; }
.tip-text { font-size:11px; color:#6b7280; line-height:1.45; }
/* --- CSS from team-members-datatables.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-primary { background: #3b82f6; color: #fff; border: none; padding: 8px 15px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.3s; display: inline-block; text-decoration: none; }
.btn-primary:hover { background: #2563eb; }
/* Table Styles */
.card-table { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; overflow: hidden; }
.card-header-flex { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.card-header-title { font-size: 16px; font-weight: 700; color: #111; }
.card-header-actions { display: flex; align-items: center; gap: 15px; }
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 800px; }
.table th { text-align: left; padding: 15px 25px; font-size: 12px; font-weight: 600; color: #777; border-bottom: 1px dashed #e5e7eb; }
.table td { padding: 15px 25px; border-bottom: 1px dashed #e5e7eb; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table th i.fa-sort { color: #ccc; margin-left: 5px; cursor: pointer; }
.user-info { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.user-name { font-size: 14px; font-weight: 600; color: #111; display: block; }
.user-role { font-size: 12px; color: #777; }
.badge-role { display: inline-block; padding: 4px 8px; border: 1px solid #e5e7eb; border-radius: 4px; font-size: 11px; font-weight: 500; color: #555; background: #f8f9fa; margin-right: 5px; margin-bottom: 5px;}
.location { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #333; }
.location img { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
.status-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: capitalize;}
.status-active { background: #e0f8e9; color: #16a34a; }
.status-missing { background: #fef3c7; color: #d97706; }
.status-neutral { background: #fee2e2; color: #dc2626; }
.activity { font-size: 13px; color: #555; }
.action-btn { background: none; border: none; color: #999; cursor: pointer; padding: 5px; }
.pagination-wrap { padding: 15px 25px; border-top: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.per-page { font-size: 13px; color: #555; display: flex; align-items: center; gap: 10px; }
.pagination { display: flex; align-items: center; gap: 5px; list-style: none; padding: 0; margin: 0; }
.pagination li { display: inline-block; font-size: 13px; color: #777; }
.pagination a { padding: 6px 12px; border-radius: 4px; font-size: 13px; color: #555; text-decoration: none; border: 1px solid transparent; }
.pagination a:hover { background: #f1f1f4; }
.pagination a.active { background: #3b82f6; font-weight: 600; color: #fff; border: 1px solid #3b82f6; }
/* Checkbox */
.custom-checkbox { position: relative; padding-left: 20px; cursor: pointer; font-size: 14px; user-select: none; }
.custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 16px; width: 16px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; }
.custom-checkbox:hover input ~ .checkmark { background-color: #f1f1f4; }
.custom-checkbox input:checked ~ .checkmark { background-color: #3b82f6; border-color: #3b82f6; }
.checkmark:after { content: ""; position: absolute; display: none; }
.custom-checkbox input:checked ~ .checkmark:after { display: block; }
.custom-checkbox .checkmark:after { left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Invites Section */
.invites-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
@media (max-width: 900px) { .invites-grid { grid-template-columns: 1fr; } }
.invite-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; }
.invite-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 20px; }
.form-row { display: flex; gap: 15px; align-items: flex-end; margin-bottom: 15px; }
.form-group { flex: 1; }
.form-group.role-group { flex: 0 0 150px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 8px; }
.form-control { width: 100%; border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 12px; font-size: 13px; outline: none; box-sizing: border-box; }
.form-control:focus { border-color: #3b82f6; }
.input-group { display: flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; margin-bottom: 15px; }
.input-group .form-control { border: none; border-radius: 0; box-shadow: none; flex: 1; margin-bottom: 0; }
.input-group-text { background: #fff; padding: 10px 15px; color: #777; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-add-more { background: none; border: 1px dashed #ccc; width: 100%; padding: 10px; border-radius: 6px; color: #555; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 20px; }
.text-center { text-align: center; }
.help-text { font-size: 12px; color: #777; margin-top: 15px; text-align: center; line-height: 1.5; }
.btn-light { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; margin-bottom: 15px; display: inline-flex; align-items: center; gap: 5px; }
.btn-light:hover { background: #f9f9f9; }
/* FAQ & Support (from previous page) */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
@media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.card-body { padding: 25px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; }
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from team-members.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-primary { background: #3b82f6; color: #fff; border: none; padding: 8px 15px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.3s; display: inline-block; text-decoration: none; }
.btn-primary:hover { background: #2563eb; }
/* Table Styles */
.card-table { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; overflow: hidden; }
.card-header-flex { padding: 20px 25px; border-bottom: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.card-header-title { font-size: 16px; font-weight: 700; color: #111; }
.card-header-actions { display: flex; align-items: center; gap: 15px; }
.search-input { border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 30px 8px 12px; font-size: 13px; background: url('data:image/svg+xml;utf8,') no-repeat right 10px center; width: 200px; outline: none; }
.search-input:focus { border-color: #3b82f6; }
.toggle-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #555; }
.switch { position: relative; display: inline-block; width: 34px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e7eb; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(14px); }
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 800px; }
.table th { text-align: left; padding: 15px 25px; font-size: 12px; font-weight: 600; color: #777; border-bottom: 1px dashed #e5e7eb; }
.table td { padding: 15px 25px; border-bottom: 1px dashed #e5e7eb; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table th i.fa-sort { color: #ccc; margin-left: 5px; cursor: pointer; }
.user-info { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.user-name { font-size: 14px; font-weight: 600; color: #111; display: block; }
.user-role { font-size: 12px; color: #777; }
.badge-role { display: inline-block; padding: 4px 8px; border: 1px solid #e5e7eb; border-radius: 4px; font-size: 11px; font-weight: 500; color: #555; background: #f8f9fa; margin-right: 5px; margin-bottom: 5px;}
.location { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #333; }
.location img { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
.status-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: capitalize;}
.status-active { background: #e0f8e9; color: #16a34a; }
.status-missing { background: #fef3c7; color: #d97706; }
.status-neutral { background: #fee2e2; color: #dc2626; }
.activity { font-size: 13px; color: #555; }
.action-btn { background: none; border: none; color: #999; cursor: pointer; padding: 5px; }
.pagination-wrap { padding: 15px 25px; border-top: 1px solid #f1f1f4; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.per-page { font-size: 13px; color: #555; display: flex; align-items: center; gap: 10px; }
.per-page select { border: 1px solid #e5e7eb; border-radius: 4px; padding: 4px 8px; background: #fff; }
.pagination { display: flex; align-items: center; gap: 5px; list-style: none; padding: 0; margin: 0; }
.pagination li { display: inline-block; font-size: 13px; color: #777; }
.pagination a { padding: 6px 12px; border-radius: 4px; font-size: 13px; color: #555; text-decoration: none; border: 1px solid transparent; }
.pagination a:hover { background: #f1f1f4; }
.pagination a.active { background: #f1f1f4; font-weight: 600; color: #111; border: 1px solid #e5e7eb; }
/* Checkbox */
.custom-checkbox { position: relative; padding-left: 20px; cursor: pointer; font-size: 14px; user-select: none; }
.custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 16px; width: 16px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; }
.custom-checkbox:hover input ~ .checkmark { background-color: #f1f1f4; }
.custom-checkbox input:checked ~ .checkmark { background-color: #3b82f6; border-color: #3b82f6; }
.checkmark:after { content: ""; position: absolute; display: none; }
.custom-checkbox input:checked ~ .checkmark:after { display: block; }
.custom-checkbox .checkmark:after { left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Invites Section */
.invites-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
@media (max-width: 900px) { .invites-grid { grid-template-columns: 1fr; } }
.invite-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; }
.invite-title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 20px; }
.form-row { display: flex; gap: 15px; align-items: flex-end; margin-bottom: 15px; }
.form-group { flex: 1; }
.form-group.role-group { flex: 0 0 150px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 8px; }
.form-control { width: 100%; border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 12px; font-size: 13px; outline: none; box-sizing: border-box; }
.form-control:focus { border-color: #3b82f6; }
.input-group { display: flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; margin-bottom: 15px; }
.input-group .form-control { border: none; border-radius: 0; box-shadow: none; flex: 1; margin-bottom: 0; }
.input-group-text { background: #fff; padding: 10px 15px; color: #777; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-add-more { background: none; border: 1px dashed #ccc; width: 100%; padding: 10px; border-radius: 6px; color: #555; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 20px; }
.text-center { text-align: center; }
.help-text { font-size: 12px; color: #777; margin-top: 15px; text-align: center; line-height: 1.5; }
.btn-light { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; margin-bottom: 15px; display: inline-flex; align-items: center; gap: 5px; }
.btn-light:hover { background: #f9f9f9; }
/* FAQ & Support (from previous page) */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
@media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.card-body { padding: 25px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; }
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from teams-starter.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header */
.page-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
/* Empty state starter block */
.starter-block { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; padding: 60px 20px; text-align: center; }
.starter-ill { width: 160px; height: 160px; border-radius: 50%; background: #f8f9fa; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.starter-title { font-size: 18px; font-weight: 700; color: #111; margin-bottom: 10px; line-height: 1.3; }
.starter-desc { font-size: 13px; color: #777; max-width: 500px; margin: 0 auto 25px auto; line-height: 1.5; }
.btn-primary { background: #3b82f6; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.3s; display: inline-block; text-decoration: none; }
.btn-primary:hover { background: #2563eb; }
/* FAQ Card */
.faq-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 30px; }
.faq-header { padding: 25px; border-bottom: 1px solid #f1f1f4; font-size: 16px; font-weight: 700; color: #111; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { padding: 20px 25px; border-bottom: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s; }
.faq-item:hover { background: #f9f9f9; }
.faq-item:last-child { border-bottom: none; }
.faq-item i { color: #999; }
/* Support Cards Grid */
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
@media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.card-body { padding: 25px; }
.support-card { display: flex; align-items: stretch; justify-content: space-between; }
.support-content { flex: 1; }
.support-title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px 0; }
.support-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 20px; }
.support-link { display: inline-block; color: #3b82f6; font-size: 13px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.support-ill { width: 120px; display: flex; align-items: center; justify-content: flex-end; font-size: 40px; color: #cbd5e1; }
h2, h3, h4, h5 { font-family: 'Inter', sans-serif; }
/* --- CSS from teams.html --- */
/* Base Profile CSS */
.profile-header { position: relative; margin-bottom: 20px; overflow: hidden; background: transparent; }
.cover-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%233b5cff' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; }
.profile-info { text-align: center; padding: 20px 20px 0; position: relative; z-index: 1; margin-top: 20px; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar::after { content: ''; position: absolute; bottom: 8px; right: 8px; width: 15px; height: 15px; background: #10b981; border: 2px solid #fff; border-radius: 50%; }
.profile-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333; }
.verified-icon { color: #3b82f6; font-size: 16px; margin-left: 5px; }
.profile-meta { color: #777; font-size: 14px; display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; padding-bottom: 15px; margin-bottom: 15px; position: relative; z-index: 1; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #777; font-size: 14px; font-weight: 500; padding: 10px 0; position: relative; }
.nav-tabs a.active { color: #3b5cff; font-weight: 600; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s ease; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon-sq { background: #fff; border: 1px solid #eee; color: #555; border-radius: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.btn-icon-sq:hover { background: #f8f9fa; border-color: #ddd; }
/* Filter Bar */
.filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.filter-bar h4 { font-size: 16px; font-weight: 600; color: #333; margin: 0; }
.filter-actions { display: flex; gap: 8px; }
.btn-view { background: #fff; border: 1px solid #f1f1f4; width: 36px; height: 36px; border-radius: 6px; color: #777; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.02);}
.btn-view.active { background: #f8f9fa; color: #333; border-color: #ddd; }
/* Teams Grid */
.teams-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.team-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; display: flex; flex-direction: column; transition: all 0.3s; }
.team-card:hover { border-color: #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.tc-top { text-align: center; margin-bottom: 20px; }
.tc-icon { width: 50px; height: 50px; border-radius: 50%; border: 1px dashed #ccc; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: #777; margin-bottom: 15px; }
.tc-title { font-size: 16px; font-weight: 600; color: #333; margin: 0 0 5px 0; }
.tc-desc { font-size: 13px; color: #777; margin: 0; }
.tc-details { border-top: 1px dashed #f1f1f4; padding-top: 20px; margin-bottom: 25px; flex-grow: 1; }
.tc-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.tc-row:last-child { margin-bottom: 0; }
.tc-label { font-size: 11px; font-weight: 600; color: #999; letter-spacing: 0.5px; }
.tc-skills { display: flex; gap: 5px; }
.skill-badge { background: #f8f9fa; color: #555; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; border: 1px solid #f1f1f4; }
.tc-stars { color: #facc15; font-size: 12px; }
.tc-stars .fa-star-o { color: #e5e7eb; }
.tc-stars .fa-star { color: #facc15; }
.tc-avatars { display: flex; justify-content: flex-end; }
.tc-avatars img, .tc-avatars span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; object-fit: cover; }
.tc-avatars > :first-child { margin-left: 0; }
.tc-avatars span { color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.ag-green { background: #10b981 !important; }
.ag-blue { background: #3b82f6 !important; }
.ag-purple { background: #a855f7 !important; }
.tc-footer { text-align: center; }
.btn-joined { background: #fff; border: 1px solid #e5e7eb; color: #555; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; width: 100%; max-width: 130px; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-joined:hover { background: #f9fafb; border-color: #d1d5db; }
.btn-join { background: #3b82f6; border: none; color: #fff; padding: 9px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; width: 100%; max-width: 130px; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-join:hover { background: #2563eb; }
.show-more-link { display: block; text-align: center; color: #3b82f6; font-size: 14px; font-weight: 500; text-decoration: none; padding: 15px 0; border-top: 1px dashed #eee; margin-top: 10px; }
.show-more-link:hover { text-decoration: underline; }
@media(max-width: 991px) {
.teams-grid { grid-template-columns: repeat(2, 1fr); }
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.nav-tabs a.active::after { display: none; }
}
@media(max-width: 600px) {
.teams-grid { grid-template-columns: 1fr; }
}
/* --- CSS from user-profile.html --- */
/* Account Header Nav */
.account-nav { display: flex; gap: 25px; border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-top: 10px; }
.account-nav > a, .account-nav .dropdown > a { text-decoration: none; color: #555; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; position: relative; padding-bottom: 15px; }
.account-nav > a.active, .account-nav .dropdown > a.active { color: #3b5cff; font-weight: 600; }
.account-nav > a.active::after, .account-nav .dropdown > a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #3b5cff; }
.account-nav a i { font-size: 10px; opacity: 0.7; }
.account-nav a:hover { color: #3b5cff; }
/* Page Header & Actions */
.page-top-actions { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.page-header h2 { font-size: 22px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.page-meta { font-size: 13px; color: #777; font-weight: 400; }
.header-btns { display: flex; gap: 10px; }
.btn-outline { border: 1px solid #e5e7eb; background: #fff; color: #333; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover { background: #f9f9f9; }
.btn-filled { border: none; background: #3b82f6; color: #fff; padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-filled:hover { background: #2a6ae2; }
/* Layout Grid */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
/* Cards & Lists */
.card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(0,0,0,0.01); }
.card-header { padding: 20px 25px; border-bottom: 1px solid #f9f9f9; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 15px; font-weight: 600; color: #111; margin: 0; }
.card-body { padding: 5px 25px 20px 25px; }
.list-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px dashed #f1f1f4; }
.list-row:last-child { border-bottom: none; }
.list-label { flex: 0 0 130px; color: #555; font-size: 13px; font-weight: 500; }
.list-content { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.list-text { color: #333; font-size: 13px; font-weight: 500; line-height: 1.5; }
.list-text.muted { color: #777; font-weight: 400; }
/* Utilities */
.badge-green { background: #e8fff3; color: #50cd89; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; display: inline-block; }
.badge-gray { background: #f4f6fa; color: #555; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; margin-right: 3px; margin-bottom: 5px; display: inline-block; border: 1px solid #eef0f6; }
/* Buttons inside lists */
.edit-btn { background: #f4f6fa; border: none; color: #3b82f6; width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; }
.edit-btn:hover { background: #e0e6f6; }
.text-btn { color: #3b82f6; font-size: 13px; text-decoration: none; font-weight: 500; }
.text-btn:hover { text-decoration: underline; color: #2a6ae2; }
/* Addons */
.img-avatar { position: relative; width: 45px; height: 45px; border-radius: 50%; overflow: hidden; background: #e8fff3; display: flex; align-items: center; justify-content: center; }
.img-avatar img { width: 100%; height: 100%; object-fit: cover; }
.img-avatar .overlay-icon { position: absolute; bottom: 0; right: 0; background: #fff; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #3b82f6; font-size: 8px; border: 1px solid #eee; }
.toggle-switch-container { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; font-weight: 500; }
.toggle-switch { position: relative; width: 34px; height: 20px; background: #3b82f6; border-radius: 20px; cursor: pointer; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
/* Logo list */
.social-logos { display: flex; gap: 8px; align-items: center; font-size: 16px; color: #555; }
.social-logos i.fa-google { color: #ea4335; }
.social-logos i.fa-facebook { color: #1877f2; }
.social-logos i.fa-apple { color: #000; }
.social-logos i.fa-linkedin { color: #0a66c2; }
.social-logos i.fa-twitch { color: #9146ff; }
/* Drag badge card */
.drag-row { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid #f1f1f4; border-radius: 8px; margin-bottom: 10px; }
.drag-row:last-child { margin-bottom: 0; }
.drag-left { display: flex; align-items: center; gap: 15px; }
.drag-icon-box { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.drag-icon-box.bg-blue { background: #eef2ff; color: #3b82f6; }
.drag-icon-box.bg-yellow { background: #fffbeb; color: #d97706; }
.drag-icon-box.bg-green { background: #ecfdf5; color: #10b981; }
.drag-icon-box.bg-purple { background: #f5f3ff; color: #8b5cf6; }
.drag-title { font-size: 13px; font-weight: 600; color: #333; }
.drag-handle { color: #aaa; cursor: ns-resize; }
/* Right Column specific */
.promo-box { text-align: center; border: 1px solid #f1f1f4; border-radius: 12px; padding: 30px 20px; margin-bottom: 20px; } /* Fallback background for illustration */
.promo-box h4 { font-size: 18px; font-weight: 700; color: #111; margin: 0 0 5px 0; }
.promo-box p { font-size: 13px; color: #777; margin: 0 0 15px 0; }
.promo-box .btn-dark { background: #111; color: #fff; border: none; padding: 8px 20px; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; }
.promo-img { background: #f9f9f9; border-radius: 8px; height: 180px; margin-top: 20px; border: 1px solid #eee; display:flex; align-items: center; justify-content: center; position:relative; overflow:hidden;}
.promo-img img { max-width:100%; height:auto; opacity:0.8;}
.connection-table { width: 100%; border-collapse: collapse; }
.connection-table th { text-align: left; font-size: 12px; color: #999; font-weight: 500; padding-bottom: 15px; border-bottom: 1px dashed #f1f1f4; }
.connection-table td { padding: 12px 0; border-bottom: 1px dashed #f1f1f4; }
.connection-table tr:last-child td { border-bottom: none; }
.conn-name { display: flex; align-items: center; gap: 10px; }
.conn-name img { width: 32px; height: 32px; border-radius: 50%; }
.conn-info h5 { font-size: 13px; font-weight: 600; color: #333; margin: 0; }
.conn-info span { font-size: 11px; color: #777; }
.conn-status { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; }
.conn-status.st-check { background: #3b82f6; color: #fff; }
.conn-status.st-plus { background: #f4f6fa; color: #3b82f6; border: 1px solid #eee; }
.file-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed #f1f1f4; }
.file-row:last-child { border-bottom: none; }
.file-left { display: flex; align-items: center; gap: 15px; }
.file-icon { font-size: 20px; }
.file-info h5 { font-size: 13px; font-weight: 600; color: #333; margin: 0 0 2px 0; }
.file-info span { font-size: 11px; color: #999; }
.file-more { color: #aaa; cursor: pointer; }
.file-more:hover { color: #333; }
.view-more-link { display: block; text-align: center; color: #3b82f6; font-size: 13px; font-weight: 500; margin-top: 15px; text-decoration: none; }
.view-more-link:hover { text-decoration: underline; }
/* Generic layout overrides */
h2 { font-family: 'Inter', sans-serif;}
@media(max-width: 991px) {
.profile-grid { grid-template-columns: 1fr; }
}
/* --- CSS from works.html --- */
/* Base Profile CSS */
.profile-header { position: relative; margin-bottom: 20px; overflow: hidden; background: transparent; }
.cover-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%233b5cff' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; }
.profile-info { text-align: center; padding: 20px 20px 0; position: relative; z-index: 1; margin-top: 20px; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar::after { content: ''; position: absolute; bottom: 8px; right: 8px; width: 15px; height: 15px; background: #10b981; border: 2px solid #fff; border-radius: 50%; }
.profile-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333; }
.verified-icon { color: #3b82f6; font-size: 16px; margin-left: 5px; }
.profile-meta { color: #777; font-size: 14px; display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; padding-bottom: 15px; margin-bottom: 15px; position: relative; z-index: 1; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #777; font-size: 14px; font-weight: 500; padding: 10px 0; position: relative; }
.nav-tabs a.active { color: #3b5cff; font-weight: 600; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s ease; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon-sq { background: #fff; border: 1px solid #eee; color: #555; border-radius: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.btn-icon-sq:hover { background: #f8f9fa; border-color: #ddd; }
/* Filter Bar */
.filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.filter-bar h4 { font-size: 16px; font-weight: 600; color: #333; margin: 0; }
.filter-actions { display: flex; gap: 8px; }
.btn-view { background: #fff; border: 1px solid #f1f1f4; width: 36px; height: 36px; border-radius: 6px; color: #777; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.02);}
.btn-view.active { background: #f8f9fa; color: #333; border-color: #ddd; }
/* Works Grid */
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.work-card { background: #fff; border-radius: 12px; border: 1px solid #f1f1f4; box-shadow: 0 1px 3px rgba(0,0,0,0.02); display: flex; flex-direction: column; overflow: hidden; transition: all 0.3s ease; height: 100%; min-height: 290px; }
.work-card:hover { border-color: #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.wc-img { width: 100%; height: 200px; object-fit: cover; border-bottom: 1px solid #f1f1f4; }
.wc-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
.wc-title { font-size: 15px; font-weight: 600; color: #333; margin: 0 0 20px 0; }
.wc-footer { display: flex; justify-content: space-between; align-items: center; }
.wc-author { display: flex; align-items: center; gap: 8px; }
.wc-author img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.wc-author span { font-size: 13px; color: #555; font-weight: 500; }
.wc-stats { display: flex; gap: 12px; color: #999; font-size: 12px; }
.wc-stats span { display: flex; align-items: center; gap: 4px; }
.wc-stats i { font-size: 13px; font-weight: 400; }
/* Add New Feature Card */
.work-add-card { background: #fff; border-radius: 12px; border: 2px dashed #e2e8f0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 290px; text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; }
.work-add-card:hover { border-color: #3b82f6; background: #f8faff; }
.wac-bg { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%233b5cff' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; }
.wac-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #3b82f6; font-size: 24px; margin-bottom: 20px; z-index: 1; border: 1px solid #f1f1f4; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.wac-title { font-size: 16px; font-weight: 600; color: #333; margin: 0 0 5px 0; z-index: 1; }
.wac-desc { font-size: 12px; color: #777; margin: 0; z-index: 1; }
.show-more-link { display: block; text-align: center; color: #3b82f6; font-size: 14px; font-weight: 500; text-decoration: none; padding: 15px 0; border-top: 1px dashed #eee; margin-top: 10px; }
.show-more-link:hover { text-decoration: underline; }
@media(max-width: 991px) {
.works-grid { grid-template-columns: repeat(2, 1fr); }
/* Base Profile CSS */
.profile-header { position: relative; margin-bottom: 20px; overflow: hidden; background: transparent; }
.cover-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%233b5cff' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; }
.profile-info { text-align: center; padding: 20px 20px 0; position: relative; z-index: 1; margin-top: 20px; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar::after { content: ''; position: absolute; bottom: 8px; right: 8px; width: 15px; height: 15px; background: #10b981; border: 2px solid #fff; border-radius: 50%; }
.profile-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333; }
.verified-icon { color: #3b82f6; font-size: 16px; margin-left: 5px; }
.profile-meta { color: #777; font-size: 14px; display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
.profile-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f4; padding-bottom: 15px; margin-bottom: 15px; position: relative; z-index: 1; }
.nav-tabs { display: flex; gap: 20px; }
.nav-tabs a { text-decoration: none; color: #777; font-size: 14px; font-weight: 500; padding: 10px 0; position: relative; }
.nav-tabs a.active { color: #3b5cff; font-weight: 600; }
.nav-tabs a i { font-size: 10px; margin-left: 4px; }
.nav-actions { display: flex; gap: 10px; }
.btn-primary { background: #3b5cff; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s ease; }
.btn-primary:hover { background: #2a41b5; }
.btn-icon-sq { background: #fff; border: 1px solid #eee; color: #555; border-radius: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.btn-icon-sq:hover { background: #f8f9fa; border-color: #ddd; }
/* Filter Bar */
.filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.filter-bar h4 { font-size: 16px; font-weight: 600; color: #333; margin: 0; }
.filter-actions { display: flex; gap: 8px; }
.btn-view { background: #fff; border: 1px solid #f1f1f4; width: 36px; height: 36px; border-radius: 6px; color: #777; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.02);}
.btn-view.active { background: #f8f9fa; color: #333; border-color: #ddd; }
/* Works Grid */
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.work-card { background: #fff; border-radius: 12px; border: 1px solid #f1f1f4; box-shadow: 0 1px 3px rgba(0,0,0,0.02); display: flex; flex-direction: column; overflow: hidden; transition: all 0.3s ease; height: 100%; min-height: 290px; }
.work-card:hover { border-color: #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.wc-img { width: 100%; height: 200px; object-fit: cover; border-bottom: 1px solid #f1f1f4; }
.wc-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
.wc-title { font-size: 15px; font-weight: 600; color: #333; margin: 0 0 20px 0; }
.wc-footer { display: flex; justify-content: space-between; align-items: center; }
.wc-author { display: flex; align-items: center; gap: 8px; }
.wc-author img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.wc-author span { font-size: 13px; color: #555; font-weight: 500; }
.wc-stats { display: flex; gap: 12px; color: #999; font-size: 12px; }
.wc-stats span { display: flex; align-items: center; gap: 4px; }
.wc-stats i { font-size: 13px; font-weight: 400; }
/* Add New Feature Card */
.work-add-card { background: #fff; border-radius: 12px; border: 2px dashed #e2e8f0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 290px; text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; }
.work-add-card:hover { border-color: #3b82f6; background: #f8faff; }
.wac-bg { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%233b5cff' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; }
.wac-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #3b82f6; font-size: 24px; margin-bottom: 20px; z-index: 1; border: 1px solid #f1f1f4; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.wac-title { font-size: 16px; font-weight: 600; color: #333; margin: 0 0 5px 0; z-index: 1; }
.wac-desc { font-size: 12px; color: #777; margin: 0; z-index: 1; }
.show-more-link { display: block; text-align: center; color: #3b82f6; font-size: 14px; font-weight: 500; text-decoration: none; padding: 15px 0; border-top: 1px dashed #eee; margin-top: 10px; }
.show-more-link:hover { text-decoration: underline; }
@media(max-width: 991px) {
.works-grid { grid-template-columns: repeat(2, 1fr); }
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.nav-tabs a.active::after { display: none; }
}
@media(max-width: 600px) {
.works-grid { grid-template-columns: 1fr; }
}
/* === Dashboard Specific Styles === */
.dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 25px; }
.stats-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; position: relative; transition: transform 0.2s, box-shadow 0.2s; }
.stats-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.stats-icon { width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 20px; }
.stats-icon.linkedin { background: #eff6ff; color: #0077b5; }
.stats-icon.youtube { background: #fff1f2; color: #ff0000; }
.stats-icon.instagram { background: #fff5f8; color: #e4405f; }
.stats-icon.tiktok { background: #f8fafc; color: #000000; }
.stats-value { font-size: 24px; font-weight: 700; color: #111; margin-bottom: 5px; }
.stats-label { font-size: 13px; color: #777; font-weight: 500; }
.dashboard-row-mid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; margin-top: 20px; }
.highlight-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; }
.highlight-title { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 20px; display: flex; justify-content: space-between; }
.highlight-val { font-size: 22px; font-weight: 700; color: #111; margin-bottom: 5px; display: flex; align-items: center; gap: 10px; }
.badge-success { background: #dcfce7; color: #16a34a; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.color-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 15px 0 25px 0; }
.bar-metronic { width: 40%; background: #22c55e; }
.bar-bundle { width: 30%; background: #ef4444; }
.bar-nest { width: 30%; background: #a855f7; }
.legend-list { list-style: none; padding: 0; margin-bottom: 25px; }
.legend-item { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.store-list { list-style: none; padding: 0; border-top: 1px dashed #f1f1f4; padding-top: 20px; }
.store-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 13px; font-weight: 600; color: #555; }
.store-left { display: flex; align-items: center; gap: 10px; }
.store-icon { width: 24px; height: 24px; border: 1px solid #f1f1f4; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999; }
.trend-up { color: #16a34a; }
.trend-down { color: #dc2626; }
.connect-banner { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 40px; display: flex; align-items: center; gap: 40px; position: relative; overflow: hidden; background-image: radial-gradient(#f1f1f4 1px, transparent 1px); background-size: 20px 20px; }
.connect-content { flex: 1; position: relative; z-index: 2; }
.connect-avatars { display: flex; align-items: center; margin-bottom: 20px; }
.connect-avatars img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; }
.connect-avatars img:first-child { margin-left: 0; }
.avatar-plus { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; background: #22c55e; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.connect-title { font-size: 20px; font-weight: 700; color: #111; margin-bottom: 15px; line-height: 1.4; }
.connect-title span { color: #3b82f6; }
.connect-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 25px; max-width: 400px; }
.connect-link { color: #3b82f6; font-size: 13px; font-weight: 700; text-decoration: none; border-bottom: 1px solid #3b82f6; }
.connect-ill { position: absolute; right: 40px; width: 250px; opacity: 0.1; }
.earnings-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; margin-top: 20px; }
.earnings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.earnings-title { font-size: 16px; font-weight: 700; color: #111; }
.earnings-filters { display: flex; align-items: center; gap: 20px; }
.chart-placeholder { width: 100%; height: 250px; background: url('data:image/svg+xml;utf8,') no-repeat center; background-size: 100% 100%; border-bottom: 1px solid #f1f1f4; position: relative; margin-bottom: 20px; }
.chart-labels { display: flex; justify-content: space-between; font-size: 11px; color: #999; font-weight: 600; text-transform: uppercase; }
.dashboard-row-bottom { display: grid; grid-template-columns: 320px 1fr; gap: 20px; margin-top: 20px; }
.meeting-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; }
.meeting-time { font-size: 12px; font-weight: 700; color: #111; margin-bottom: 5px; }
.meeting-title { font-size: 18px; font-weight: 700; color: #111; margin-bottom: 15px; display: flex; justify-content: space-between; }
.meeting-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 25px; }
.meeting-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; background: #f9f9fb; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
.meta-label { font-size: 10px; font-weight: 700; color: #999; text-transform: uppercase; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.meta-val { font-size: 13px; font-weight: 600; color: #111; }
.btn-meeting { display: block; text-align: center; color: #3b82f6; font-size: 13px; font-weight: 700; text-decoration: none; margin-top: 20px; }
.teams-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; }
.teams-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.search-wrap { position: relative; }
.search-wrap > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #999; font-size: 13px; }
.search-input { border: 1px solid #f1f1f4; background: #f9f9fb; border-radius: 8px; padding: 8px 12px 8px 35px; font-size: 13px; width: 250px; outline: none; }
.teams-table { width: 100%; border-collapse: collapse; }
.teams-table th { text-align: left; padding: 12px 15px; font-size: 12px; font-weight: 600; color: #777; border-bottom: 1px solid #f1f1f4; }
.teams-table td { padding: 15px; border-bottom: 1px solid #f1f1f4; font-size: 13px; vertical-align: middle; }
.team-info h5 { font-size: 13px; font-weight: 700; color: #111; margin: 0 0 3px 0; }
.team-info p { font-size: 11px; color: #999; margin: 0; }
.rating { color: #f59e0b; font-size: 12px; }
.teams-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; font-size: 13px; color: #777; font-weight: 600; }
.pagination { display: flex; gap: 10px; align-items: center; }
.page-link { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; text-decoration: none; color: #555; }
.page-link.active { background: #eff6ff; color: #3b82f6; }
@media(max-width: 1200px) {
.dashboard-grid { grid-template-columns: repeat(2, 1fr); }
.dashboard-row-mid, .dashboard-row-bottom { grid-template-columns: 1fr; }
}
@media(max-width: 600px) {
.dashboard-grid { grid-template-columns: 1fr; }
.meeting-card{
width: 97%;
}
.teams-card{
width: 97%;
}
.teams-table td{
display: none;
}
}
.nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.nav-tabs a.active::after { display: none; }
}
@media(max-width: 600px) {
.works-grid { grid-template-columns: 1fr; }
}
/* === Dashboard Specific Styles === */
.dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 25px; }
.stats-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; position: relative; transition: transform 0.2s, box-shadow 0.2s; }
.stats-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.stats-icon { width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 20px; }
.stats-icon.linkedin { background: #eff6ff; color: #0077b5; }
.stats-icon.youtube { background: #fff1f2; color: #ff0000; }
.stats-icon.instagram { background: #fff5f8; color: #e4405f; }
.stats-icon.tiktok { background: #f8fafc; color: #000000; }
.stats-value { font-size: 24px; font-weight: 700; color: #111; margin-bottom: 5px; }
.stats-label { font-size: 13px; color: #777; font-weight: 500; }
.dashboard-row-mid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; margin-top: 20px; }
.highlight-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; }
.highlight-title { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 20px; display: flex; justify-content: space-between; }
.highlight-val { font-size: 22px; font-weight: 700; color: #111; margin-bottom: 5px; display: flex; align-items: center; gap: 10px; }
.badge-success { background: #dcfce7; color: #16a34a; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.color-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 15px 0 25px 0; }
.bar-metronic { width: 40%; background: #22c55e; }
.bar-bundle { width: 30%; background: #ef4444; }
.bar-nest { width: 30%; background: #a855f7; }
.legend-list { list-style: none; padding: 0; margin-bottom: 25px; }
.legend-item { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.store-list { list-style: none; padding: 0; border-top: 1px dashed #f1f1f4; padding-top: 20px; }
.store-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 13px; font-weight: 600; color: #555; }
.store-left { display: flex; align-items: center; gap: 10px; }
.store-icon { width: 24px; height: 24px; border: 1px solid #f1f1f4; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999; }
.trend-up { color: #16a34a; }
.trend-down { color: #dc2626; }
.connect-banner { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 40px; display: flex; align-items: center; gap: 40px; position: relative; overflow: hidden; background-image: radial-gradient(#f1f1f4 1px, transparent 1px); background-size: 20px 20px; }
.connect-content { flex: 1; position: relative; z-index: 2; }
.connect-avatars { display: flex; align-items: center; margin-bottom: 20px; }
.connect-avatars img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; }
.connect-avatars img:first-child { margin-left: 0; }
.avatar-plus { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; background: #22c55e; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.connect-title { font-size: 20px; font-weight: 700; color: #111; margin-bottom: 15px; line-height: 1.4; }
.connect-title span { color: #3b82f6; }
.connect-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 25px; max-width: 400px; }
.connect-link { color: #3b82f6; font-size: 13px; font-weight: 700; text-decoration: none; border-bottom: 1px solid #3b82f6; }
.connect-ill { position: absolute; right: 40px; width: 250px; opacity: 0.1; }
.earnings-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; margin-top: 20px; }
.earnings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.earnings-title { font-size: 16px; font-weight: 700; color: #111; }
.earnings-filters { display: flex; align-items: center; gap: 20px; }
.chart-placeholder { width: 100%; height: 250px; background: url('data:image/svg+xml;utf8,') no-repeat center; background-size: 100% 100%; border-bottom: 1px solid #f1f1f4; position: relative; margin-bottom: 20px; }
.chart-labels { display: flex; justify-content: space-between; font-size: 11px; color: #999; font-weight: 600; text-transform: uppercase; }
.dashboard-row-bottom { display: grid; grid-template-columns: 320px 1fr; gap: 20px; margin-top: 20px; }
.meeting-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; }
.meeting-time { font-size: 12px; font-weight: 700; color: #111; margin-bottom: 5px; }
.meeting-title { font-size: 18px; font-weight: 700; color: #111; margin-bottom: 15px; display: flex; justify-content: space-between; }
.meeting-desc { font-size: 13px; color: #777; line-height: 1.5; margin-bottom: 25px; }
.meeting-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; background: #f9f9fb; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
.meta-label { font-size: 10px; font-weight: 700; color: #999; text-transform: uppercase; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.meta-val { font-size: 13px; font-weight: 600; color: #111; }
.btn-meeting { display: block; text-align: center; color: #3b82f6; font-size: 13px; font-weight: 700; text-decoration: none; margin-top: 20px; }
.teams-card { background: #fff; border: 1px solid #f1f1f4; border-radius: 12px; padding: 25px; }
.teams-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.search-wrap { position: relative; }
.search-wrap > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #999; font-size: 13px; }
.search-input { border: 1px solid #f1f1f4; background: #f9f9fb; border-radius: 8px; padding: 8px 12px 8px 35px; font-size: 13px; width: 250px; outline: none; }
.teams-table { width: 100%; border-collapse: collapse; }
.teams-table th { text-align: left; padding: 12px 15px; font-size: 12px; font-weight: 600; color: #777; border-bottom: 1px solid #f1f1f4; }
.teams-table td { padding: 15px; border-bottom: 1px solid #f1f1f4; font-size: 13px; vertical-align: middle; }
.team-info h5 { font-size: 13px; font-weight: 700; color: #111; margin: 0 0 3px 0; }
.team-info p { font-size: 11px; color: #999; margin: 0; }
.rating { color: #f59e0b; font-size: 12px; }
.teams-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; font-size: 13px; color: #777; font-weight: 600; }
.pagination { display: flex; gap: 10px; align-items: center; }
.page-link { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; text-decoration: none; color: #555; }
.page-link.active { background: #eff6ff; color: #3b82f6; }
@media(max-width: 1200px) {
.dashboard-grid { grid-template-columns: repeat(2, 1fr); }
.dashboard-row-mid, .dashboard-row-bottom { grid-template-columns: 1fr; }
}
@media(max-width: 600px) {
.dashboard-grid { grid-template-columns: 1fr; }
}
/* Settings/API/Notifications Page Layout */
.page-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-bottom: 25px;
}
@media (max-width: 900px) {
.page-grid {
grid-template-columns: 1fr;
}
}
.sidebar-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
.sidebar-card-title {
font-weight: 600;
font-size: 15px;
margin-bottom: 8px;
color: #111;
}
.sidebar-card-desc {
font-size: 13px;
color: #555;
line-height: 1.5;
margin-bottom: 15px;
}
.info-icon {
font-size: 20px;
color: #3b82f6;
margin-bottom: 10px;
}
.info-title {
font-weight: 600;
font-size: 14px;
margin-bottom: 8px;
}
.info-desc {
font-size: 13px;
color: #666;
margin-bottom: 15px;
line-height: 1.5;
}
.info-link {
font-size: 13px;
color: #3b82f6;
text-decoration: none;
font-weight: 500;
}
.btn-block {
width: 100%;
text-align: center;
padding: 8px 12px;
}
.card-header-flex {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #eee;
background: #f8fafc;
border-radius: 12px 12px 0 0;
}
.card-header-title {
font-weight: 600;
font-size: 15px;
color: #111;
}
.card-header-right {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: #555;
}
.list-group {
list-style: none;
margin: 0;
padding: 0;
}
.list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #eee;
}
.list-item:last-child {
border-bottom: none;
}
.item-left {
display: flex;
align-items: center;
gap: 15px;
}
.item-icon {
width: 40px;
height: 40px;
background: #f1f5f9;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #64748b;
}
.item-info {
display: flex;
flex-direction: column;
}
.item-title {
font-weight: 600;
font-size: 14px;
color: #111;
}
.item-desc {
font-size: 12px;
color: #666;
margin-top: 3px;
}
.item-right {
display: flex;
align-items: center;
gap: 15px;
}
.webhook-grid {
display: grid;
grid-template-columns: 200px 1fr;
align-items: center;
margin-bottom: 15px;
gap: 15px;
}
@media (max-width: 600px) {
.webhook-grid {
grid-template-columns: 1fr;
gap: 5px;
}
}
.api-input-group {
display: flex;
align-items: center;
}
.api-input-group input {
flex: 1;
border-radius: 6px 0 0 6px;
border-right: none;
font-family: monospace;
}
.api-copy-btn {
padding: 8px 12px;
border: 1px solid #e5e7eb;
background: #f9fafb;
border-radius: 0 6px 6px 0;
cursor: pointer;
}
.api-help-text {
font-size: 12px;
color: #777;
margin-top: 5px;
}
.upgrade-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 20px;
display: flex;
align-items: center;
gap: 20px;
margin: 20px 0;
}
.upgrade-icon {
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #f59e0b;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.upgrade-content {
flex: 1;
}
.upgrade-title {
font-weight: 600;
font-size: 15px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 5px;
}
.badge-blue {
background: #eff6ff;
color: #2563eb;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
}
.upgrade-desc {
font-size: 13px;
color: #555;
line-height: 1.5;
}
.btn-black {
background: #111;
color: #fff;
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
}
@media (max-width: 768px) {
.upgrade-box {
flex-direction: column;
text-align: center;
}
}
.api-key-text {
font-family: monospace;
background: #f1f5f9;
padding: 3px 6px;
border-radius: 4px;
}
.action-icon {
background: none;
border: none;
color: #94a3b8;
cursor: pointer;
font-size: 14px;
}
.pagination-wrap {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 25px;
border-top: 1px solid #eee;
}
@media (max-width: 600px) {
.pagination-wrap {
flex-direction: column;
gap: 15px;
}
}
.page-meta {
color: #777;
font-size: 13px;
margin-top: 5px;
}
/* Account Navigation & Common Buttons */
.account-nav {
display: flex;
gap: 20px;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 10px;
margin-bottom: 25px;
overflow-x: auto;
white-space: nowrap;
}
.account-nav > a, .account-nav .dropdown > a {
text-decoration: none;
color: #64748b;
font-size: 14px;
font-weight: 500;
padding-bottom: 10px;
border-bottom: 2px solid transparent;
margin-bottom: -11px;
}
.account-nav > a.active, .account-nav .dropdown > a.active {
color: #3b82f6;
border-bottom-color: #3b82f6;
}
.btn-outline {
padding: 8px 16px;
border: 1px solid #e5e7eb;
background: #fff;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
text-decoration: none;
display: inline-block;
color: #111;
}
.btn-primary {
padding: 8px 16px;
background: #3b82f6;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
text-decoration: none;
display: inline-block;
}
/* Forms & Toggles */
.form-label {
font-size: 13px;
font-weight: 500;
color: #111;
display: block;
}
.form-control {
width: 100%;
padding: 10px 12px;
border: 1px solid #e5e7eb;
border-radius: 6px;
font-size: 13px;
outline: none;
}
.form-control:focus {
border-color: #3b82f6;
}
.toggle-switch {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: #555;
cursor: pointer;
}
.switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #10b981;
}
input:checked + .slider:before {
transform: translateX(16px);
}
/* Tables */
.table-responsive {
overflow-x: auto;
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.table th, .table td {
padding: 12px 20px;
text-align: left;
border-bottom: 1px solid #f1f5f9;
color: #555;
}
.table th {
font-weight: 600;
color: #111;
background: #f8fafc;
}
.custom-checkbox {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
}
.custom-checkbox input {
opacity: 0;
width: 0;
height: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 16px;
width: 16px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
top: 7.5px; width: 20px;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #3b82f6;
border-color: #3b82f6;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 5px;
top: 2px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Pagination */
.pagination {
list-style: none;
display: flex;
gap: 5px;
margin: 0;
padding: 0;
}
.pagination a {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid #e5e7eb;
border-radius: 4px;
text-decoration: none;
color: #555;
}
.pagination a.active {
background: #3b82f6;
color: #fff;
border-color: #3b82f6;
}
/* Generalized Grids */
/* 2-Column Main + Sidebar Grids */
.profile-grid, .settings-grid, .billing-grid, .security-grid, .payment-grid, .profile-grid-company {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
/* 3-Column Standard Grids */
.projects-grid, .works-grid, .teams-grid, .card-grid, .campaigns-grid, .products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* 2-Column Standard Grids */
.projects-grid-2, .order-cards-grid, .address-grid, .split-grid, .grid-2col, .roles-grid, .posts-grid, .invites-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* Auto-fill Small Items (Avatars, Icons) */
.game-icons-grid, .team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
gap: 10px;
}
/* Auto-fill Cards */
.tourney-grid, .playing-grid, .gallery-grid, .nft-grid, .network-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
/* Dashboard Specific Grids */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 25px;
}
/* Mega Menu / Layout Grid */
.mega-content-grid, .mega-links.grid-2, .m-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* Check / Permission Grids */
.check-grid, .perm-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
/* Responsiveness */
@media (max-width: 1200px) {
.dashboard-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.projects-grid, .works-grid, .teams-grid, .card-grid, .campaigns-grid, .products-grid {
grid-template-columns: repeat(2, 1fr);
}
.check-grid, .perm-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
/* Collapse Main + Sidebar grids to 1 column */
.profile-grid, .settings-grid, .billing-grid, .security-grid, .payment-grid, .profile-grid-company {
grid-template-columns: 1fr;
}
/* Collapse all 2/3 column standard grids to 1 column */
.projects-grid, .works-grid, .teams-grid, .card-grid, .campaigns-grid, .products-grid,
.projects-grid-2, .order-cards-grid, .address-grid, .split-grid, .grid-2col, .roles-grid,
.posts-grid, .invites-grid {
grid-template-columns: 1fr;
}
/* Collapse dashboard to 1 column */
.dashboard-grid {
grid-template-columns: 1fr;
}
/* Collapse Mega/Layout grids */
.mega-content-grid, .mega-links.grid-2, .m-grid {
grid-template-columns: 1fr;
}
/* Collapse Check/Permission */
.check-grid, .perm-grid {
grid-template-columns: 1fr;
}
/* Allow auto-fill cards to shrink smaller */
.tourney-grid, .playing-grid, .gallery-grid, .nft-grid, .network-grid {
grid-template-columns: 1fr;
}
}
/* Fix Tables for Mobile */
@media (max-width: 600px) {
.info-table td.label {
display: block;
font-weight: 600;
margin-bottom: 5px;
border-bottom: none;
padding-bottom: 0;
}
.info-table td.value {
display: block;
padding-top: 0;
}
.toolbar {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.toolbar > div {
width: 100%;
flex-wrap: wrap;
}
}
/* Miscellaneous Missing Classes */
.card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.card-title {
font-weight: 600;
font-size: 16px;
color: #111;
}
.meta {
font-size: 13px;
color: #777;
margin-top: 4px;
}
.btn-xs {
padding: 5px 10px;
font-size: 12px;
border: 1px solid #e5e7eb;
background: #fff;
border-radius: 4px;
cursor: pointer;
}
.muted {
color: #777;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
}
.dot.green { background: #10b981; }
.dot.red { background: #ef4444; }
.dot.blue { background: #3b82f6; }
.avatar-sm {
width: 30px;
height: 30px;
border-radius: 50%;
vertical-align: middle;
margin-right: 10px;
}
.info-table {
width: 100%;
border-collapse: collapse;
}
.info-table td {
padding: 15px 0;
border-bottom: 1px dashed #e5e7eb;
font-size: 13px;
}
.info-table td.label {
color: #777;
width: 150px;
}
.tag {
display: inline-block;
background: #f1f5f9;
padding: 4px 10px;
border-radius: 4px;
margin: 0 5px 5px 0;
font-size: 12px;
}
.side-card {
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #f1f5f9;
}
.side-card:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.link {
color: #3b82f6;
text-decoration: none;
font-size: 13px;
font-weight: 500;
}
.stats {
font-size: 24px;
font-weight: 700;
margin: 10px 0;
}
/* === EXACT OVERRIDE FOR DEFAULT PROFILE (FIX) === */
body .profile-grid {
display: grid !important;
grid-template-columns: 300px 1fr !important;
gap: 20px !important;
align-items: start !important;
}
body .table-container {
overflow-x: auto !important;
width: 100% !important;
}
@media (max-width: 1024px) {
body .profile-grid {
grid-template-columns: 250px 1fr !important;
}
}
@media (max-width: 900px) {
body .profile-grid {
grid-template-columns: 1fr !important;
}
body .split-col {
grid-template-columns: 1fr !important;
}
}
/* =========================================
PERFECT PROFILE HEADER (Layout-1)
========================================= */
.profile-header-new {
position: relative;
background: transparent;
margin-bottom: 30px;
padding-top: 40px;
}
.ph-cover-pattern {
position: absolute;
top: 0; left: 0; right: 0;
height: 350px;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.02' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
background-size: 80px;
z-index: 0;
pointer-events: none;
}
.ph-info {
position: relative;
z-index: 1;
text-align: center;
}
.ph-avatar-wrap {
display: inline-flex;
padding: 3px;
border-radius: 50%;
background: linear-gradient(135deg, #10b981 0%, #eab308 100%);
margin-bottom: 15px;
}
.ph-avatar {
width: 110px;
height: 110px;
border-radius: 50%;
border: 4px solid #fff;
object-fit: cover;
background: #fff;
}
.ph-info h3 {
font-size: 24px;
font-weight: 600;
color: #111;
margin: 0 0 10px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.ph-verified {
color: #3b82f6;
font-size: 18px;
}
.ph-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
color: #555;
font-size: 14px;
font-weight: 500;
margin-bottom: 40px;
}
.ph-meta i {
color: #999;
margin-right: 6px;
font-size: 15px;
}
.ph-nav {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
z-index: 1;
border-bottom: 1px solid #eef0f6;
}
.ph-tabs {
display: flex;
gap: 30px;
}
.ph-tabs a {
color: #555;
text-decoration: none;
font-size: 14px;
font-weight: 600;
padding-bottom: 15px;
position: relative;
}
.ph-tabs a i {
font-size: 10px;
margin-left: 4px;
color: #999;
}
.ph-tabs a.active {
color: #3b82f6;
}
.ph-tabs a.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background: #3b82f6;
}
.ph-actions {
display: flex;
gap: 10px;
padding-bottom: 10px;
}
/* Show dropdown when .show class is added by JS */
.dropdown-menu.show {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 999999 !important;
}
/* ph-actions 3-dot dropdown: right-aligned */
.ph-actions .dropdown {
position: relative;
}
.ph-actions .dropdown .dropdown-menu {
left: auto !important;
right: 0 !important;
top: calc(100% + 6px) !important;
margin-top: 0 !important;
}
/* ===== PH-TABS DROPDOWN (Sidebar-style) ===== */
.ph-tab-dropdown {
position: relative;
}
.ph-tab-btn {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
user-select: none;
}
.ph-tab-btn i {
font-size: 10px !important;
margin-left: 3px;
color: #aaa;
transition: transform 0.2s ease;
}
.ph-tab-dropdown.open > .ph-tab-btn i {
transform: rotate(180deg);
color: #3b5cff;
}
.ph-tab-dropdown.open > .ph-tab-btn {
color: #3b5cff;
}
.ph-tab-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
min-width: 185px;
padding: 8px 8px;
z-index: 500;
}
.ph-tab-dropdown.open .ph-tab-menu {
display: block;
animation: fadeIn 0.15s ease;
}
/* Sidebar-style section label (optional group title) */
.ph-tab-menu-title {
font-size: 11px;
color: #999;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 4px 10px 6px;
margin-top: 2px;
}
/* Each link row looks exactly like a sidebar submenu item */
.ph-tab-menu a {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: #555;
text-decoration: none;
transition: background 0.15s, color 0.15s;
position: static;
margin-bottom: 2px;
}
.ph-tab-menu a i {
font-size: 13px;
width: 16px;
text-align: center;
color: #999;
flex-shrink: 0;
}
.ph-tab-menu a:hover {
background: #f1f3f7;
color: #333;
}
.ph-tab-menu a:hover i {
color: #555;
}
.ph-tab-menu a.active {
background: #eef3ff;
color: #3b5cff;
font-weight: 600;
}
.ph-tab-menu a.active i {
color: #3b5cff;
}
.ph-tab-menu a.active::after {
display: none !important;
}
/* ===== PH 3-DOT DROPDOWN MENU ===== */
.ph-dot-menu {
min-width: 200px !important;
padding: 8px 8px !important;
border-radius: 10px !important;
right: 0 !important;
left: auto !important;
}
/* Standard icon + label rows (shares same base as sidebar submenu) */
.ph-dot-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: #555;
text-decoration: none;
transition: background 0.15s, color 0.15s;
margin-bottom: 2px;
}
.ph-dot-menu a i {
font-size: 14px;
width: 18px;
text-align: center;
color: #999;
flex-shrink: 0;
}
.ph-dot-menu a:hover {
background: #f1f3f7;
color: #333;
}
.ph-dot-menu a:hover i {
color: #555;
}
/* Stay Updated toggle row */
.ph-dot-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 10px;
border-radius: 6px;
margin-bottom: 2px;
cursor: pointer;
transition: background 0.15s;
}
.ph-dot-toggle-row:hover {
background: #f1f3f7;
}
.ph-dot-toggle-left {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 500;
color: #555;
}
.ph-dot-toggle-left i {
font-size: 14px;
width: 18px;
text-align: center;
color: #999;
flex-shrink: 0;
}
/* Toggle switch */
.ph-toggle {
position: relative;
display: inline-block;
width: 34px;
height: 19px;
flex-shrink: 0;
}
.ph-toggle input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.ph-toggle-slider {
position: absolute;
inset: 0;
background: #dde1ea;
border-radius: 34px;
transition: background 0.2s;
cursor: pointer;
}
.ph-toggle-slider::before {
content: "";
position: absolute;
width: 13px;
height: 13px;
left: 3px;
top: 3px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.ph-toggle input:checked + .ph-toggle-slider {
background: #3b5cff;
}
.ph-toggle input:checked + .ph-toggle-slider::before {
transform: translateX(15px);
}
/* Report User — danger style */
.ph-dot-danger {
color: #ef4444 !important;
margin-top: 4px;
border-top: 1px solid #f3f4f6;
padding-top: 11px !important;
margin-top: 4px !important;
}
.ph-dot-danger i {
color: #ef4444 !important;
}
.ph-dot-danger:hover {
background: #fff1f1 !important;
color: #dc2626 !important;
}
.btn-connect {
background: #3b82f6;
color: #fff;
border: none;
border-radius: 6px;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.btn-icon-outline {
background: transparent;
color: #777;
border: 1px solid #eef0f6;
border-radius: 6px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
}
@media (max-width: 900px) {
.ph-nav { flex-direction: column; align-items: flex-start; gap: 20px; }
.ph-tabs { overflow-x: auto; width: 100%; white-space: nowrap; padding-bottom: 0; }
}
/* =========================================
PROFILE PAGES - MOBILE WHITE SPACE FIX
Fixes the large blank area caused by
.ph-cover-pattern absolute height on mobile
========================================= */
@media (max-width: 768px) {
/* Reduce cover height so it doesn't overflow the header on mobile */
.ph-cover-pattern {
height: 180px !important;
}
/* Make profile header not add so much top padding */
.profile-header-new {
padding-top: 20px !important;
margin-bottom: 16px !important;
}
/* Collapse ALL profile grids to single column on mobile */
.profile-grid,
[class*="profile-grid"] {
display: block !important;
grid-template-columns: 1fr !important;
}
/* Reduce avatar size on mobile */
.ph-avatar {
width: 80px !important;
height: 80px !important;
}
/* Reduce name font size */
.ph-info h3 {
font-size: 18px !important;
margin-bottom: 6px !important;
}
/* Wrap meta info on small screens */
.ph-meta {
flex-wrap: wrap !important;
gap: 6px 14px !important;
font-size: 12px !important;
margin-bottom: 20px !important;
justify-content: center !important;
}
/* Stack actions below tabs */
.ph-nav {
gap: 12px !important;
border-bottom: none !important;
}
.ph-tabs {
border-bottom: 1px solid #eef0f6 !important;
gap: 16px !important;
}
.ph-tabs a {
font-size: 13px !important;
padding-bottom: 10px !important;
}
.ph-actions {
padding: 8px 0 !important;
}
}
@media (max-width: 480px) {
.ph-cover-pattern {
height: 140px !important;
}
.profile-header-new {
padding-top: 14px !important;
}
.ph-avatar {
width: 68px !important;
height: 68px !important;
}
.ph-info h3 {
font-size: 16px !important;
}
.ph-meta {
font-size: 11px !important;
gap: 5px 10px !important;
}
}
/* ===== GLOBAL SEARCH POPUP =====*/
@keyframes fadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.search-popup { display:none; position:absolute; top:calc(100% + 14px); right:-10px; width:550px; max-width:95vw; background:#fff; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,0.12); border:1px solid #f1f1f4; z-index:9999; overflow:hidden; }
.search-popup.active { display:block; animation:fadeIn 0.18s ease; }
.search-box-header { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid #f1f1f4; }
.search-box-header input { flex:1; border:none; outline:none; font-size:14px; color:#111; background:transparent; }
.search-box-header i { color:#9ca3af; font-size:16px; }
.search-tabs-container { display:flex; align-items:center; justify-content:space-around; overflow-x: auto; flex-wrap:nowrap; }
.search-tabs { display:flex; align-items:center; scrollbar-width: none; }
.search-tabs span { padding:10px 12px; font-size:13px; font-weight:500; color:black; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; flex-shrink:0; }
.search-tabs span.active { color:#3b82f6; border-bottom-color:#3b82f6; font-weight:600; }
.search-tabs-container > div > i, .search-tabs-container > i { color:#999; cursor:pointer; font-size:16px; flex-shrink:0; }
.search-content { padding:10px 0; max-height:500px; overflow-y:auto; scrollbar-width: none; }
.search-section { padding:8px 0; border-bottom:1px solid #f9fafb; }
.section-title { font-size:11px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.7px; padding:4px 18px 6px; margin:0; }
.search-item { display:flex; align-items:center; gap:12px; padding:9px 18px; cursor:pointer; }
.search-item:hover,.search-item.active { background:#f9fafb; }
.settings-icon { font-size:15px; color:#6b7280; width:20px; text-align:center; }
.settings-text { font-size:13px; font-weight:500; color:#111; }
.complex-item { justify-content:space-between; }
.item-left { display:flex; align-items:center; gap:12px; }
.logo-circle { width:42px; height:42px; border-radius:10px; border:1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; background:#f9fafb; flex-shrink:0; font-size:20px; }
.item-title { font-size:13px; font-weight:600; color:#111; }
.item-subtitle { font-size:12px; color:#6b7280; margin-top:2px; }
.item-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.avatar-group { display:flex; align-items:center; }
.avatar-group img { width:28px; height:28px; border-radius:50%; border:2px solid #fff; margin-left:-8px; object-fit:cover; }
.avatar-group img:first-child { margin-left:0; }
.more-badge { width:28px; height:28px; border-radius:50%; background:#22c55e; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-left:-8px; border:2px solid #fff; }
.user-avatar-large { width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.status-badge { display:flex; align-items:center; gap:8px; }
.badge-pill { font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; display:flex; align-items:center; gap:6px; }
.badge-pill.in-office { background:#ecfdf5; color:#10b981; border:1px solid #a7f3d0; }
.badge-pill.in-office .dot { background:#10b981; }
.badge-pill.on-leave { background:#fef2f2; color:#ef4444; border:1px solid #fecaca; }
.badge-pill.on-leave .dot { background:#ef4444; }
.badge-pill.remote { background:#eff6ff; color:#3b82f6; border:1px solid #bfdbfe; }
.badge-pill.remote .dot { background:#3b82f6; }
.badge-pill .dot { width:6px; height:6px; border-radius:50%; display:inline-block; }
.dots-icon { color:#999; font-size:14px; }
.file-icon { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; letter-spacing:.5px; flex-shrink:0; }
.file-icon.pdf { background:#ef4444; } .file-icon.doc { background:#3b82f6; } .file-icon.js { background:#22c55e; } .file-icon.ai { background:#f97316; } .file-icon.php { background:#8b5cf6; }
.tab-content { display:none; } .tab-content.active { display:block; }
.settings-popup { position:absolute; top:calc(100% + 15px); right:-10px; width:260px; background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.1); border:1px solid #f1f1f4; display:none; z-index:10000; padding:12px 0; }
.settings-popup.active { display:block; animation:fadeIn 0.15s ease; }
.settings-header { font-size:12px; font-weight:600; color:#111; padding:4px 20px 8px; }
/* SETTINGS ITEM */
.settings-item{
display:flex;
align-items:center;
gap:14px;
padding:14px 18px;
cursor:pointer;
border-radius:10px;
transition:0.2s;
}
/* HOVER */
.settings-item:hover{
background:#f5f7ff;
}
/* LEFT SECTION */
.settings-left{
display:flex;
align-items:center;
gap:14px;
}
/* FIX ICON POSITION */
.settings-left i{
position:static !important;
width:18px;
min-width:18px;
text-align:center;
font-size:15px;
color:#777;
}
/* ICON */
.settings-item i{
width:20px;
min-width:20px;
font-size:16px;
color:#777;
display:flex;
align-items:center;
justify-content:center;
line-height:0;
}
/* TEXT */
.settings-item span{
font-size:15px;
font-weight:500;
color:#222;
line-height:1;
}
/* ===== TOPBAR ICON ===== */
.topbar-icon{
position:relative;
width:42px;
height:42px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
cursor:pointer;
transition:.2s;
}
.topbar-icon:hover{
background:#f5f7ff;
}
.topbar-icon i{
font-size:16px;
color:#555;
}
/* ===== DOT ===== */
.notification-dot{
position:absolute;
top:10px;
right:10px;
width:8px;
height:8px;
background:#3b5cff;
border-radius:50%;
}
/* ===== PANEL ===== */
.notification-panel{
position:fixed;
top:80px;
right:20px;
width:420px;
max-width:calc(100vw - 40px);
height:650px;
max-height:calc(100vh - 100px);
background:#fff;
border-radius:16px;
border:1px solid #eee;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
display:none;
flex-direction:column;
overflow:hidden;
z-index:9999;
}
.notification-panel.active{
display:flex;
}
/* ===== HEADER ===== */
.notification-header{
padding:18px 20px;
border-bottom:1px solid #eee;
display:flex;
align-items:center;
justify-content:space-between;
}
.notification-header h3{
font-size:16px;
font-weight:600;
}
.close-btn{
border:none;
background:none;
cursor:pointer;
color:#999;
}
/* ===== TABS ===== */
.notification-tabs{
display:flex;
gap:10px;
padding:14px 18px;
border-bottom:1px solid #eee;
overflow-x:auto;
}
.notification-tabs button{
border:none;
background:none;
font-size:13px;
font-weight:500;
color:#666;
cursor:pointer;
padding-bottom:8px;
}
.notification-tabs button.active{
color:#3b5cff;
border-bottom:2px solid #3b5cff;
}
/* ===== BODY ===== */
.notification-body{
flex:1;
overflow-y:auto;
min-height:0;
}
/* ===== ITEM ===== */
.notification-item{
display:flex;
gap:14px;
padding:16px 18px;
transition:.2s;
}
.notification-item:hover{
background:#f8f9ff;
}
.notification-item img{
width:42px;
height:42px;
border-radius:50%;
object-fit:cover;
flex-shrink:0;
}
.notification-content{
flex:1;
}
.notification-content p{
font-size:14px;
color:#333;
line-height:1.5;
}
.notification-content strong{
font-weight:600;
}
.notification-content span{
color:#3b5cff;
}
.notification-content small{
display:block;
margin-top:4px;
font-size:12px;
color:#888;
}
/* ===== MESSAGE ===== */
.message-box{
margin-top:12px;
background:#f5f5f5;
padding:12px;
border-radius:10px;
font-size:13px;
color:#444;
}
/* ===== TAGS ===== */
.tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:12px;
}
.tags span{
background:#f2f2f2;
color:#444;
font-size:11px;
padding:5px 10px;
border-radius:6px;
}
/* ===== ACTION BUTTONS ===== */
.action-buttons{
display:flex;
gap:10px;
margin-top:14px;
}
.decline-btn,
.accept-btn{
padding:8px 14px;
border-radius:8px;
font-size:12px;
font-weight:600;
cursor:pointer;
}
.decline-btn{
border:1px solid #ddd;
background:#fff;
}
.accept-btn{
border:none;
background:#111;
color:#fff;
}
/* ===== FILE BOX ===== */
.file-box{
margin-top:12px;
background:#f5f5f5;
border-radius:10px;
padding:12px;
font-size:13px;
}
/* ===== FOOTER ===== */
.notification-footer{
padding:16px;
border-top:1px solid #eee;
display:flex;
gap:12px;
}
.notification-footer button{
flex:1;
height:42px;
border-radius:10px;
border:1px solid #ddd;
background:#fff;
cursor:pointer;
font-size:13px;
font-weight:500;
}
/* ===== MOBILE ===== */
@media(max-width:600px){
.notification-panel{
width:100%;
height:100vh;
top:0;
right:0;
border-radius:0;
}
}
/* ===== TAB CONTENT ===== */
.notification-tab-content{
display:none;
}
.notification-tab-content.active-tab{
display:block;
}
/* ===== ITEM ===== */
.notification-item{
position:relative;
display:flex;
gap:16px;
padding:22px;
border-bottom:1px solid #f1f1f1;
}
/* ===== AVATAR ===== */
.user-avatar{
width:48px;
height:48px;
border-radius:50%;
object-fit:cover;
flex-shrink:0;
}
/* ===== ONLINE DOT ===== */
.online-dot{
position:absolute;
left:56px;
top:54px;
width:10px;
height:10px;
background:#16c172;
border:2px solid #fff;
border-radius:50%;
}
/* ===== CONTENT ===== */
.notification-content{
flex:1;
}
.notification-content p{
font-size:16px;
line-height:1.5;
color:#333;
}
.notification-content strong{
font-weight:700;
}
.notification-content span{
color:#3b5cff;
}
.notification-content small{
display:block;
margin-top:6px;
color:#888;
font-size:14px;
}
/* ===== PROFILE CARD ===== */
.profile-request-card{
margin-top:18px;
background:#f7f7f7;
border:1px solid #ececec;
border-radius:14px;
padding:16px 18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.profile-request-left h4{
font-size:16px;
color:#222;
}
.profile-request-left p{
font-size:14px;
color:#888;
margin-top:4px;
}
/* ===== PROFILE BUTTON ===== */
.profile-btn{
border:none;
background:none;
font-size:15px;
font-weight:600;
color:#222;
cursor:pointer;
}
/* ===== ACTIONS ===== */
.action-buttons{
display:flex;
gap:14px;
margin-top:18px;
}
.decline-btn,
.accept-btn{
height:42px;
padding:0 18px;
border-radius:10px;
font-size:15px;
font-weight:600;
cursor:pointer;
}
.decline-btn{
background:#fff;
border:1px solid #ddd;
}
.accept-btn{
background:#111;
color:#fff;
border:none;
}
/* ===== SUCCESS ITEM ===== */
.success-item{
display:flex;
align-items:center;
gap:18px;
padding:28px 22px;
border-bottom:1px solid #f1f1f1;
}
.success-icon{
width:42px;
height:42px;
border-radius:50%;
background:#e9fff1;
border:1px solid #8ee6ae;
display:flex;
align-items:center;
justify-content:center;
}
.success-icon i{
color:#16c172;
font-size:18px;
}
.success-item h4{
font-size:16px;
color:#222;
}
.success-item p{
margin-top:6px;
color:#888;
font-size:14px;
}
/* ===== FILE CARD ===== */
.file-upload-card{
margin-top:18px;
background:#f7f7f7;
border:1px solid #ececec;
border-radius:14px;
padding:16px 18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.file-left{
display:flex;
align-items:center;
gap:14px;
}
.file-icon{
width:42px;
height:42px;
border-radius:10px;
background:#0f9d58;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:700;
}
.file-left h4{
font-size:16px;
color:#222;
}
.file-left p{
margin-top:4px;
font-size:14px;
color:#888;
}
/* ===== DOWNLOAD ===== */
.download-btn{
width:38px;
height:38px;
border:none;
background:#fff;
border-radius:10px;
cursor:pointer;
color:#666;
}
/* ===== MOBILE ===== */
@media(max-width:600px){
.notification-item{
padding:18px;
}
.notification-content p{
font-size:15px;
}
.profile-request-card,
.file-upload-card{
flex-direction:column;
align-items:flex-start;
}
.profile-btn{
margin-top:10px;
}
}
/* TABS */
.notification-tabs{
position:relative;
z-index:10;
display:flex;
align-items:center;
gap:14px;
}
/* TAB BUTTON */
.notification-tabs button{
position:relative;
z-index:11;
pointer-events:auto;
cursor:pointer;
}
/* BODY */
.notification-body{
position:relative;
z-index:1;
}
/* ===== CHAT PANEL ===== */
.chat-panel{
position:fixed;
top:80px;
right:20px;
width:500px;
max-width:calc(100vw - 40px);
height:88vh;
max-height:calc(100vh - 100px);
background:#fff;
border-radius:18px;
border:1px solid #eee;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
display:none;
flex-direction:column;
overflow:hidden;
z-index:9999;
}
.chat-panel.active{
display:flex;
}
.chat-body{
flex:1;
overflow-y:auto;
min-height:0;
padding:24px;
scrollbar-width: none;
}
/* ===== HEADER ===== */
.chat-header{
padding:22px;
border-bottom:1px solid #eee;
display:flex;
align-items:center;
justify-content:space-between;
}
.chat-header h3{
font-size:18px;
}
.chat-close{
border:none;
background:none;
cursor:pointer;
color:#999;
}
/* ===== TEAM HEADER ===== */
.chat-team-header{
padding:20px 22px;
border-bottom:1px solid #eee;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.team-left{
display:flex;
align-items:center;
gap:14px;
}
.team-logo{
width:48px;
height:48px;
border-radius:50%;
}
.team-left h4{
font-size:18px;
color:#222;
}
.team-left p{
margin-top:4px;
color:#888;
font-size:14px;
font-style:italic;
}
/* ===== USERS ===== */
.team-right{
display:flex;
align-items:center;
gap:16px;
}
.team-users{
display:flex;
align-items:center;
}
.team-users img{
width:36px;
height:36px;
border-radius:50%;
border:2px solid #fff;
margin-left:-10px;
}
.team-users img:first-child{
margin-left:0;
}
.team-users span{
width:36px;
height:36px;
border-radius:50%;
background:#16c172;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:700;
border:2px solid #fff;
margin-left:-10px;
}
.menu-btn{
border:none;
background:none;
cursor:pointer;
color:#777;
}
/* ===== CHAT BODY ===== */
.chat-body{
flex:1;
overflow-y:auto;
padding:24px;
}
/* ===== MESSAGE ===== */
.message-row{
display:flex;
gap:14px;
margin-bottom:26px;
}
.right-message{
justify-content:flex-end;
}
.message-avatar{
width:46px;
height:46px;
border-radius:50%;
object-fit:cover;
}
.message-box{
max-width:min(340px, 65vw);
word-wrap:break-word;
}
.left-box{
background:#f5f5f5;
color:#333;
}
.right-box{
background:#3b5cff;
color:#fff;
font-weight:600;
}
.message-time{
display:block;
margin-top:8px;
font-size:14px;
color:#888;
}
.right-time{
text-align:right;
}
/* ===== REQUEST ===== */
.join-request{
padding:18px 22px;
border-top:1px solid #eee;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap: wrap;
gap:20px;
}
.join-left{
display:flex;
align-items:center;
gap:14px;
}
.join-avatar{
width:48px;
height:48px;
border-radius:50%;
}
.join-left h4{
font-size:16px;
color:#222;
}
.join-left p{
margin-top:4px;
font-size:14px;
color:#888;
}
/* ===== ACTIONS ===== */
.join-actions{
display:flex;
gap:12px;
}
.decline-btn,
.accept-btn{
height:42px;
padding:0 18px;
border-radius:10px;
font-size:15px;
font-weight:600;
cursor:pointer;
}
.decline-btn{
background:#fff;
border:1px solid #ddd;
}
.accept-btn{
background:#111;
color:#fff;
border:none;
}
/* ===== FOOTER ===== */
.chat-footer{
padding:20px;
border-top:1px solid #eee;
display:flex;
align-items:center;
gap:14px;
}
.chat-input-wrap{
flex:1;
height:62px;
border:1px solid #ddd;
border-radius:14px;
padding:0 16px;
display:flex;
align-items:center;
gap:14px;
}
.footer-avatar{
width:40px;
height:40px;
border-radius:50%;
}
.chat-input-wrap input{
flex:1;
border:none;
outline:none;
font-size:16px;
}
.upload-btn{
border:none;
background:none;
cursor:pointer;
color:#777;
}
.send-btn{
height:52px;
padding:0 24px;
border:none;
border-radius:12px;
background:#111;
color:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
}
/* ===== TABLET ===== */
@media(max-width:900px){
.chat-panel{
width:95vw;
right:50%;
transform:translateX(50%);
top:75px;
height:85vh;
max-height:85vh;
}
}
/* ===== MOBILE ===== */
@media(max-width:700px){
.chat-panel{
width:100%;
height:100vh;
top:0;
right:0;
border-radius:0;
}
.chat-body{
padding:18px;
}
.message-box{
max-width:240px;
font-size:15px;
}
.join-request{
flex-direction:column;
align-items:flex-start;
}
.chat-footer{
flex-direction:column;
}
.send-btn{
width:100%;
}
}
/* ===== TABLE CELL LARGE ===== */
.table-cells-large{
width:100%;
background:#fff;
border:1px solid #eee;
border-radius:18px;
overflow:hidden;
}
/* ===== HEADER ===== */
.apps-panel{
position:fixed;
top:80px;
right:20px;
width:420px;
max-width:calc(100vw - 40px);
background:#fff;
border-radius:18px;
border:1px solid #eee;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
display:none; /* IMPORTANT */
z-index:99999;
overflow:hidden;
}
.apps-panel.active{
display:block;
}
.apps-header{
padding:22px 24px;
border-bottom:1px solid #eee;
display:flex;
align-items:center;
justify-content:space-between;
}
.apps-header h3{
font-size:22px;
color:#222;
}
.apps-header span{
font-size:16px;
color:#666;
font-weight:500;
}
/* ===== APP ITEM ===== */
.app-item{
padding:22px 24px;
border-bottom:1px solid #f1f1f1;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
/* ===== LEFT ===== */
.app-left{
display:flex;
align-items:center;
gap:18px;
}
/* ===== ICON ===== */
.app-icon{
width:58px;
height:58px;
border-radius:50%;
background:#f7f7f7;
border:1px solid #ececec;
display:flex;
align-items:center;
justify-content:center;
}
.app-icon img{
width:28px;
height:28px;
object-fit:contain;
}
/* ===== TEXT ===== */
.app-left h4{
font-size:18px;
color:#222;
}
.app-left p{
margin-top:4px;
font-size:15px;
color:#666;
}
/* ===== SWITCH ===== */
.switch{
position:relative;
width:48px;
height:28px;
display:inline-block;
}
.switch input{
opacity:0;
width:0;
height:0;
}
/* ===== SLIDER ===== */
.slider{
position:absolute;
inset:0;
background:#ddd;
border-radius:999px;
cursor:pointer;
transition:.3s;
}
.slider::before{
content:'';
position:absolute;
width:20px;
height:20px;
left:4px;
top:4px;
border-radius:50%;
background:#fff;
transition:.3s;
}
/* ACTIVE */
.switch input:checked + .slider{
background:#3b5cff;
}
.switch input:checked + .slider::before{
transform:translateX(20px);
}
/* ===== FOOTER ===== */
.apps-footer{
padding:26px 24px;
}
.apps-footer button{
width:100%;
height:58px;
border:1px solid #ddd;
border-radius:14px;
background:#fff;
font-size:18px;
font-weight:600;
cursor:pointer;
transition:.2s;
}
.apps-footer button:hover{
background:#f8f9ff;
}
/* ===== MOBILE ===== */
@media(max-width:600px){
.apps-header{
padding:18px;
}
.app-item{
padding:18px;
}
.app-left{
gap:14px;
}
.app-icon{
width:50px;
height:50px;
}
.app-left h4{
font-size:16px;
}
.app-left p{
font-size:13px;
}
}
/* ===== PROFILE PANEL ===== */
.profile-panel{
position:fixed;
cursor: pointer;
top:80px;
right:20px;
width:320px;
max-width:calc(100vw - 30px);
background:#fff;
border-radius:18px;
border:1px solid #eee;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
display:none;
overflow:hidden;
z-index:99999;
}
.avatar{
width:38px;
height:38px;
border-radius:50%;
border:2px solid #10b981;
cursor:pointer;
position:relative;
z-index:100000;
}
/* ACTIVE */
.profile-panel.active{
display:block;
}
/* ===== TOP ===== */
.profile-top{
padding:18px;
border-bottom:1px solid #eee;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
/* USER */
.profile-user{
display:flex;
align-items:center;
gap:14px;
}
.profile-user-img{
width:54px;
height:54px;
border-radius:50%;
border:2px solid #10b981;
}
/* TEXT */
.profile-user h3{
font-size:18px;
color:#222;
}
.profile-user p{
margin-top:4px;
font-size:14px;
color:#666;
}
/* PRO */
.pro-badge{
padding:6px 10px;
border-radius:8px;
background:#edf3ff;
color:#3b5cff;
font-size:14px;
font-weight:600;
}
/* ===== MENU ===== */
.profile-menu{
padding:10px 0;
}
/* ITEM */
.profile-item{
padding:16px 20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
cursor:pointer;
transition:.2s;
}
.profile-item:hover{
background:#f8f9ff;
}
/* LEFT */
.profile-left{
display:flex;
align-items:center;
gap:14px;
}
.profile-left i{
width:20px;
text-align:center;
font-size:18px;
color:#777;
}
.profile-left span{
font-size:16px;
font-weight:500;
color:#222;
}
/* ARROW */
.arrow-icon{
color:#999;
font-size:14px;
}
/* LANGUAGE */
.language-box{
padding:8px 12px;
border-radius:10px;
border:1px solid #ddd;
font-size:14px;
font-weight:500;
background:#fff;
}
/* ===== FOOTER ===== */
.profile-footer{
padding:18px;
border-top:1px solid #eee;
}
/* LOGOUT */
.logout-btn{
width:100%;
height:52px;
border-radius:12px;
border:1px solid #ddd;
background:#fff;
font-size:18px;
font-weight:600;
cursor:pointer;
transition:.2s;
}
.logout-btn:hover{
background:#f8f9ff;
}
/* ===== MOBILE ===== */
@media(max-width:600px){
.profile-panel{
width:95vw;
right:50%;
transform:translateX(50%);
}
}
/* ========================================================
CRITICAL OVERRIDE FOR DROPDOWNS & ACCOUNT NAV
======================================================== */
.account-nav {
overflow: visible !important;
overflow-x: visible !important;
flex-wrap: wrap !important;
white-space: normal !important;
}
.dropdown-menu.show {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 2147483647 !important;
}
/* ===== ACCOUNT NAV DROPDOWN (injected fix) ===== */
.account-nav {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 2px !important;
padding: 0 0 16px 0 !important;
border-bottom: 1px solid #f1f1f4 !important;
margin-bottom: 20px !important;
}
.account-nav > a {
color: #6b7280;
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
text-decoration: none;
border-radius: 6px;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
display: inline-block;
}
.account-nav > a:hover { color: #111827; background: #f3f4f6; }
.account-nav > a.active { color: #111827; font-weight: 600; background: #f3f4f6; }
.account-nav .dropdown { position: relative; display: inline-block !important; }
.account-nav .dropdown-toggle {
color: #6b7280;
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
text-decoration: none;
border-radius: 6px;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
display: inline-block;
}
.account-nav .dropdown-toggle:hover { color: #111827; background: #f3f4f6; }
.account-nav .dropdown-toggle.active { color: #111827; font-weight: 600; background: #f3f4f6; }
.account-nav .dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 9999;
background: #fff;
border-radius: 8px;
border: 1px solid #e5e7eb;
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
padding: 6px 0;
min-width: 200px;
}
.account-nav .dropdown-menu.show { display: block !important; }
.account-nav .dropdown-menu a {
display: block !important;
padding: 9px 16px !important;
font-size: 13px !important;
color: #374151 !important;
text-decoration: none !important;
background: transparent !important;
border-radius: 0 !important;
font-weight: 400 !important;
white-space: nowrap !important;
}
.account-nav .dropdown-menu a:hover { background: #f9fafb !important; color: #111827 !important; }