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

body{
    background:#030712;
    color:white;
    overflow-x:hidden;
}

 .sidebar{
     position:fixed;
     left:0;
     top:0;
     width:260px;
     height:auto;
     max-height:100vh;
     background:rgba(2, 6, 23, .82);
     border-right:1px solid rgba(59,130,246,.28);
     padding:25px;
     z-index:1000;

     /* subtle premium blue glow around entire sidebar */
     box-shadow:
         0 0 0 1px rgba(59,130,246,.15) inset,
         -12px 0 40px rgba(59,130,246,.18),
         0 0 45px rgba(37,99,235,.12);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 /* glowing edge accents (all sides feel "alive", but still subtle) */
 .sidebar::before{
     content:"";
     position:absolute;
     inset:10px;
     border-radius:18px;
     pointer-events:none;
     border:1px solid rgba(59,130,246,.18);
     box-shadow:0 0 30px rgba(59,130,246,.14);
     opacity:.9;
 }

 .sidebar a,
.sidebar .logo-link{
    position:relative;
    z-index:1;
}

.sidebar h2{
    margin-bottom:35px;
    color:white;

    font-weight:800;
    letter-spacing:.2px;
}

/* improve typography for sidebar items */
.sidebar a{
    display:flex;
    align-items:center;
    gap:12px;

    text-decoration:none;
    color:#cbd5e1;

    padding:12px 14px;
    border-radius:14px;

    margin-bottom:10px;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
    border:1px solid rgba(148,163,184,.12);

    /* subtle text glow */
    text-shadow:0 0 16px rgba(59,130,246,.10);
    font-weight:650;
    letter-spacing:.1px;
}

.sidebar a:hover{
    background:rgba(29,78,216,.16);
    color:#ffffff;
    border-color:rgba(59,130,246,.40);
    box-shadow:0 0 20px rgba(59,130,246,.22);
    transform: translateY(-2px);
}

/* premium “boxed” feel */
.sidebar a{
    background:rgba(15,23,42,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

/* active menu item */
.sidebar a.active{
    background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(29,78,216,.14));
    color:#ffffff;

    border-color:rgba(59,130,246,.65);
    box-shadow:
        0 0 0 1px rgba(59,130,246,.25) inset,
        0 0 28px rgba(59,130,246,.35);

    /* stronger (but still elegant) glow */
    text-shadow:0 0 22px rgba(59,130,246,.35);
}

.sidebar a.active:hover{
    transform: translateY(-2px);
}

/* make icons/images in sidebar feel premium */
.sidebar-logo{
    border-radius:12px;
    box-shadow: 0 0 24px rgba(59,130,246,.18);
}

.main-content{
    margin-left:280px;
    padding:30px;
    padding-bottom:40px;
}

.welcome-box{
    background:linear-gradient(
        135deg,
        #020617,
        #0f172a
    );

    border:1px solid rgba(59,130,246,.2);
    border-radius:20px;
    padding:30px;
    margin-bottom:25px;
}

.welcome-box h1{
    font-size:42px;
    margin-bottom:10px;
}

.welcome-box p{
    color:#94a3b8;
}

.stats{
    display:grid;
    grid-template-columns:
    repeat(4,1fr);

    gap:20px;
    margin-bottom:30px;
}

.stat-card{
    background:#0f172a;
    border:1px solid rgba(59,130,246,.2);
    border-radius:18px;
    padding:25px;
}

.stat-card h2{
    font-size:38px;
    color:#3b82f6;
    margin-bottom:10px;
}

.stat-card p{
    color:#94a3b8;
}

button{
    background:#2563eb;
    border:none;
    color:white;
    padding:12px 22px;
    border-radius:12px;
    cursor:pointer;
    margin-top:15px;
    margin-right:10px;
}

button:hover{
    background:#1d4ed8;
}

@media(max-width:1200px){

.stats{
    grid-template-columns:
    repeat(2,1fr);
}

}

@media(max-width:768px){

.sidebar{
    display:none;
}

.main-content{
    margin-left:0;
}

.stats{
    grid-template-columns:1fr;
}

}
.action-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:30px;
}

.action-card{
    background:#0f172a;
    border:1px solid rgba(59,130,246,.2);
    border-radius:20px;
    padding:30px;
    cursor:pointer;
    transition:.3s;
}

.action-card:hover{
    transform:translateY(-5px);
    border-color:#3b82f6;
    box-shadow:0 0 30px rgba(59,130,246,.25);
}

.action-card h2{
    color:white;
    margin-bottom:10px;
}

.action-card p{
    color:#94a3b8;
}

.post-card input,
.post-card select,
.post-card textarea{

    width:100%;

    max-width:700px;

    padding:15px;

    margin-top:8px;

    margin-bottom:15px;

    background:#111827;

    color:white;

    border:1px solid #334155;

}
.ai-buttons{

    display:flex;

    gap:15px;

    margin-top:15px;

    margin-bottom:25px;
}


.image-preview-box{
    background:#111827;
    border:1px solid #334155;
    border-radius:18px;
    padding:20px;

    height:350px !important;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

#generated-image{

    width:100%;

    border-radius:15px;

    display:none;

}

.preview-buttons{

    display:flex;

    gap:15px;

    margin-top:20px;

}

.preview-buttons button{

    flex:1;

}
.left-panel{
    width:100%;
}

.right-panel{
    width:100%;
}
.image-preview-box{

    background:
    linear-gradient(
        135deg,
        #111827,
        #0f172a
    );

    border:2px dashed #334155;

    border-radius:18px;

    height:420px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    position:relative;
}

.left-panel{
    width:100%;
}

.right-panel{
    width:100%;
}

.image-preview-box{
    background:#111827;
    border:1px solid #334155;
    border-radius:18px;
    padding:20px;
    min-height:650px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.preview-buttons{
    display:flex;
    gap:10px;
}

.preview-buttons button{
    flex:1;
}

.welcome-box{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
}

.eyebrow{
    color:#38bdf8;
    font-size:13px;
    font-weight:700;
    letter-spacing:0;
    text-transform:uppercase;
    margin-bottom:8px;
}

.plan-pill{
    background:#082f49;
    border:1px solid #0ea5e9;
    border-radius:8px;
    color:#e0f2fe;
    padding:10px 14px;
    white-space:nowrap;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:25px;
}

.dashboard-grid.single-column{
    grid-template-columns:minmax(0, 720px);
}

.blank-dashboard{
    min-height:0;
}

.premium-dashboard{
    position:relative;
    overflow:hidden;
}

.dashboard-wave{
    position:absolute;
    top:18px;
    right:20px;
    width:min(760px, 62vw);
    height:100px;
    pointer-events:none;
    opacity:.85;
}

.dashboard-wave::before{
    content:"";
    position:absolute;
    inset:24px 0 0;
    border-top:3px solid #1478ff;
    border-radius:50%;
    filter:drop-shadow(0 0 14px #1478ff);
    transform:skewX(-22deg) rotate(-3deg);
}

.premium-hero{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:28px;
    z-index:1;
}

.premium-hero h1{
    font-size:28px;
    line-height:1.2;
    margin-bottom:8px;
}

.premium-hero p{
    color:#c4c9d4;
    font-size:16px;
}

.hero-logout{
    border:1px solid rgba(148,163,184,.22);
    border-radius:8px;
    color:white;
    padding:14px 22px;
    text-decoration:none;
    background:rgba(15,23,42,.55);
}

.premium-stats{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px;
    margin-bottom:22px;
}

.premium-stat-card{
    background:linear-gradient(145deg, rgba(4,12,27,.92), rgba(7,15,33,.84));
    border:1px solid rgba(20,92,179,.28);
    border-radius:12px;
    min-height:auto;
    padding:26px 28px;
    display:flex;
    align-items:center;
    gap:24px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.premium-stat-card p{
    color:#aab2c0;
    font-size:14px;
    margin-bottom:8px;
}

.premium-stat-card h2{
    font-size:34px;
    font-weight:500;
    margin-bottom:6px;
}

.stat-icon,
.action-icon{
    width:56px;
    height:56px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-weight:800;
    font-size:20px;
}

.stat-icon.blue,
.action-icon.blue{
    background:linear-gradient(135deg,#2090ff,#0f47ff);
    box-shadow:0 0 28px rgba(20,120,255,.8);
}

.stat-icon.purple,
.action-icon.purple{
    background:linear-gradient(135deg,#7c3cff,#3b1bd6);
    box-shadow:0 0 28px rgba(124,60,255,.75);
}

.stat-icon.green{
    background:linear-gradient(135deg,#22c55e,#047b3a);
    box-shadow:0 0 28px rgba(34,197,94,.65);
}

.stat-icon.orange{
    background:linear-gradient(135deg,#ffb020,#dc2626);
    box-shadow:0 0 28px rgba(239,68,68,.65);
}

.up{
    color:#22c55e;
    font-size:13px;
}

.down{
    color:#ef4444;
    font-size:13px;
}

.premium-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:24px;
}

.premium-action-card{
    min-height:auto;
    border:1px solid rgba(20,92,179,.32);
    border-radius:12px;
    background:linear-gradient(145deg, rgba(4,14,31,.96), rgba(6,16,35,.9));
    display:grid;
    grid-template-columns:82px 1fr 48px;
    align-items:center;
    gap:22px;
    padding:28px 32px;
    color:white;
    text-decoration:none;
}

.premium-action-card.purple-card{
    background:linear-gradient(145deg, rgba(10,10,42,.96), rgba(25,12,75,.86));
}

.premium-action-card h2{
    color:#168cff;
    font-size:23px;
    margin-bottom:8px;
}

.premium-action-card.purple-card h2{
    color:#7c3cff;
}

.premium-action-card p{
    color:#c8cfdb;
    line-height:1.5;
}

.arrow{
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(21,74,160,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#dbeafe;
    font-size:20px;
}

.posts-table-card{
    border:1px solid rgba(20,92,179,.3);
    border-radius:12px;
    background:rgba(4,13,29,.96);
    overflow:hidden;
}

.table-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:24px 26px 18px;
}

.table-header h2{
    font-size:24px;
    margin-bottom:8px;
}

.table-header p{
    color:#b6bdc8;
}

.table-controls{
    display:flex;
    gap:14px;
    align-items:center;
}

.table-controls select{
    min-width:150px;
    background:#050b19;
    border:1px solid rgba(148,163,184,.22);
    border-radius:8px;
    color:white;
    padding:13px 16px;
}

.btn-view-posts{
    background:#126dff;
    color:white;
    text-decoration:none;
    border-radius:8px;
    padding:14px 18px;
    box-shadow:0 0 24px rgba(18,109,255,.45);
}

.premium-table{
    width:100%;
    border-collapse:collapse;
}

.premium-table thead{
    background:rgba(7,28,55,.72);
}

.premium-table th{
    color:#b6bdc8;
    font-size:12px;
    font-weight:600;
    text-align:left;
    text-transform:uppercase;
    padding:16px 26px;
}

.premium-table td{
    border-top:1px solid rgba(30,64,115,.32);
    color:white;
    padding:16px 26px;
    vertical-align:middle;
}

.premium-table small,
.post-cell p{
    color:#aeb6c3;
}

.post-cell{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:330px;
}

.post-cell strong{
    display:block;
    margin-bottom:6px;
}

.thumb{
    width:72px;
    height:56px;
    border-radius:6px;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.12);
    object-fit:cover;
    display:block;
}

.thumb-one{background:linear-gradient(135deg,#d6c7ad,#334155);}
.thumb-two{background:radial-gradient(circle at center,#0ea5e9,#111827 62%);}
.thumb-three{background:linear-gradient(135deg,#075985,#1d4ed8,#0f172a);}
.thumb-four{background:linear-gradient(135deg,#e5e7eb,#1e293b);}
.thumb-five{background:linear-gradient(135deg,#111827,#7c3aed,#22c55e);}

.platform{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    color:white;
    font-size:10px;
    font-weight:800;
    margin-right:6px;
}

.platform.instagram{background:linear-gradient(135deg,#f97316,#db2777,#7c3aed);}
.platform.facebook{background:#1877f2;}
.platform.whatsapp{background:#22c55e;}

.status{
    display:inline-block;
    border-radius:8px;
    font-size:13px;
    padding:7px 11px;
}

.status.published{
    background:rgba(22,163,74,.24);
    color:#86efac;
}

.edit-btn,
.delete-btn{
    border-radius:8px;
    margin:0 0 0 8px;
    padding:10px 16px;
    background:transparent;
}

.edit-btn{
    border:1px solid rgba(37,99,235,.55);
    color:#93c5fd;
}

.delete-btn{
    border:1px solid rgba(239,68,68,.48);
    color:#f87171;
}

.table-footer{
    border-top:1px solid rgba(30,64,115,.32);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 26px 20px;
    color:#b6bdc8;
}

.pagination{
    display:flex;
    gap:10px;
    align-items:center;
}

.pagination button{
    width:38px;
    height:38px;
    margin:0;
    padding:0;
    border-radius:50%;
    background:transparent;
    border:1px solid transparent;
}

.pagination button.active{
    background:#126dff;
    box-shadow:0 0 18px rgba(18,109,255,.6);
}

.pagination button:first-child,
.pagination button:last-child{
    border-color:rgba(148,163,184,.22);
}

.empty-posts{
    text-align:center;
    padding:36px 20px;
}

.empty-posts h3{
    font-size:22px;
    margin-bottom:10px;
}

.empty-posts p{
    color:#aeb6c3;
    margin:0 auto 20px;
    max-width:520px;
}

@media(max-width:1300px){
    .premium-stats{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .premium-actions{
        grid-template-columns:1fr;
    }

    .posts-table-card{
        overflow-x:auto;
    }

    .premium-table{
        min-width:1060px;
    }
}

@media(max-width:768px){
    .premium-hero,
    .table-header,
    .table-footer{
        display:block;
    }

    .hero-logout,
    .table-controls{
        display:inline-flex;
        margin-top:16px;
    }

    .table-controls{
        flex-wrap:wrap;
    }

    .premium-stats{
        grid-template-columns:1fr;
    }

    .premium-action-card{
        grid-template-columns:64px 1fr;
    }

    .premium-action-card .arrow{
        display:none;
    }
}

.panel{
    background:#0f172a;
    border:1px solid rgba(59,130,246,.2);
    border-radius:8px;
    padding:22px;
}

.panel-header{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
    margin-bottom:16px;
}

.panel-header h2{
    font-size:22px;
}

.panel-header a{
    color:#93c5fd;
    text-decoration:none;
}

.list-row,
.message-row{
    border-top:1px solid rgba(148,163,184,.18);
    padding:14px 0;
}

.list-row{
    display:grid;
    grid-template-columns:130px 1fr auto;
    gap:14px;
    align-items:center;
}

.list-row span,
.message-row p,
.muted{
    color:#cbd5e1;
}

.list-row small,
.message-row small{
    color:#94a3b8;
}

.message-row strong{
    color:#bfdbfe;
    display:block;
    margin-top:8px;
}

.automation-state{
    border-radius:8px;
    padding:12px;
    margin-bottom:14px;
    font-weight:700;
}

.automation-state.on{
    background:rgba(22,163,74,.16);
    color:#bbf7d0;
}

.automation-state.off{
    background:rgba(220,38,38,.16);
    color:#fecaca;
}

.test-form select,
.test-form textarea{
    width:100%;
    margin-bottom:12px;
    background:#111827;
    color:white;
    border:1px solid #334155;
    border-radius:8px;
    padding:12px;
    font-size:15px;
}

.test-form textarea{
    min-height:100px;
    resize:vertical;
}

#test_result{
    background:#020617;
    border:1px solid #1f2937;
    border-radius:8px;
    color:#dbeafe;
    margin-top:14px;
    min-height:44px;
    overflow:auto;
    padding:12px;
}

/* White-label branding styles */
.logo-link {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px !important;
    margin-bottom: 20px !important;
    border-radius: 12px;
    transition: background 0.3s;
}

.logo-link:hover {
    background: rgba(59, 130, 246, 0.1);
}

.logo-link h2 {
    margin-bottom: 4px !important;
    font-size: 18px;
    font-weight: 700;
    color: white;
    word-break: break-word;
}

.sidebar-logo {
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 8px;
}

.managed-by {
    font-size: 10px;
    color: #64748b;
    margin-top: 4px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

@media(max-width:768px){
    .dashboard-grid,
    .action-grid{
        grid-template-columns:1fr;
    }

    .welcome-box{
        display:block;
    }

    .plan-pill{
        display:inline-block;
        margin-top:16px;
    }
}


/* Toast Notifications */
#toast-container{position:fixed;top:30px;right:30px;z-index:99999;pointer-events:none}
.toast{background:linear-gradient(135deg,#0f172a,#1e293b);border:1px solid rgba(59,130,246,.3);border-radius:12px;padding:18px 24px;margin-bottom:15px;min-width:300px;display:flex;align-items:center;gap:15px;pointer-events:auto;animation:slideInRight .4s ease;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.toast.success{border-color:rgba(16,185,129,.4)}.toast.error{border-color:rgba(239,68,68,.4)}.toast.info{border-color:rgba(59,130,246,.4)}.toast-icon{font-size:24px;min-width:30px;display:flex;align-items:center}.toast.success .toast-icon{color:#10b981}.toast.error .toast-icon{color:#f87171}.toast.info .toast-icon{color:#3b82f6}
.toast-message{flex:1;color:white;font-size:14px;font-weight:500}
.toast.removing{animation:slideOutRight .4s ease forwards}
@keyframes slideInRight{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}



/* User Profile Styles */
.user-profile{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    padding:8px 16px;
    border-radius:12px;
    background:rgba(15,23,42,.55);
    border:1px solid rgba(148,163,184,.22);
    transition:all 0.3s ease;
}

.user-profile:hover{
    background:rgba(59,130,246,.15);
    border-color:rgba(59,130,246,.4);
    transform:translateY(-2px);
}

.profile-avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    background:linear-gradient(135deg,#3b82f6,#10b981);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-weight:700;
    font-size:16px;
    flex-shrink:0;
}

.profile-name{
    color:#cbd5e1;
    font-size:14px;
    font-weight:500;
}

/* AI Lead Center */
.lead-detail-panel::-webkit-scrollbar{width:6px}
.lead-detail-panel::-webkit-scrollbar-track{background:transparent}
.lead-detail-panel::-webkit-scrollbar-thumb{background:rgba(148,163,184,.2);border-radius:3px}

 /* Scale authenticated pages to 75% while keeping browser zoom at 100% */
 html:has(body .sidebar){
     height:100%;
     overflow-x:hidden;
     overflow-y:auto;
 }
 body:has(.sidebar){
     transform:scale(.75);
     transform-origin:top left;
     width:133.3333%;
     min-height:133.333vh;
     overflow-x:hidden;
 }

/* Sidebar stays full viewport height — it's position:fixed so it doesn't
   affect document flow. The body background matches the sidebar's dark color
   so there's no visible gap. */