/* =====================================================
GLOBAL
===================================================== */
*{
    box-sizing:border-box;
}

body{
background:#edf2f6 !important;
font-family:Arial,sans-serif;
color:#666 !important;
}

a{color:#666; text-decoration:none; }

td{color:#666 !important; }


/* =====================================================
TOPBAR
===================================================== */

.topbar{

    top:0;
    z-index:999;
    height:88px;
    background:#fff;
    border-bottom:1px solid #edf0f7;
    padding:0 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* =====================================================
LEFT
===================================================== */

.topbar-left{
    display:flex;
    align-items:center;
    gap:28px;
}

.topbar-logo img{
    width:150px;
    display:block;
}

/* =====================================================
MENU
===================================================== */

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

.topbar-menu a{
    text-decoration:none;
    color:#6b7280;
    font-size:14px;
    font-weight:600;
    padding:12px 18px;
    border-radius:14px;
    transition:all .25s ease;
}

.topbar-menu a:hover{
    background:#eef2ff;
    color:#4f46e5;
}

.topbar-menu a.active{
    background:#4f46e5;
    color:#fff;
    box-shadow:0 10px 20px rgba(79,70,229,.18);
}

/* =====================================================
RIGHT
===================================================== */

.topbar-right{
    display:flex;
    align-items:center;
    gap:14px;
}

/* =====================================================
PROFILE
===================================================== */

.profile-dropdown{
    position:relative;
}

.profile-btn{

    border:1px solid #e2e8f0;

    background:
    rgba(255,255,255,.85);

    backdrop-filter:blur(12px);

    border-radius:20px;

    padding:8px 12px;

    display:flex;
    align-items:center;
    gap:10px;

    cursor:pointer;

    transition:all .25s ease;

    box-shadow:
        0 8px 30px rgba(15,23,42,.06);
}

.profile-btn:hover{
    transform:translateY(-2px);
}

.profile-avatar{

    width:44px;
    height:44px;

    border-radius:16px;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed
    );

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

    color:#fff;

    font-size:14px;
    font-weight:700;

    flex-shrink:0;

    box-shadow:
    0 8px 20px
    rgba(79,70,229,.25);
}

.profile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.profile-name{
    font-size:14px;
    font-weight:700;
    color:#111827;
    line-height:1.2;
}

.profile-role{
    font-size:11px;
    color:#6b7280;
    margin-top:3px;
}

/* =====================================================
DROPDOWN
===================================================== */

.dropdown-menu{

    position:absolute;
    right:0;
    top:60px;
    width:260px;

    background:
    rgba(255,255,255,.92);

    backdrop-filter:
    blur(20px);

    -webkit-backdrop-filter:
    blur(20px);

    border-radius:24px;

    overflow:hidden;

    display:none;

    border:1px solid
    rgba(255,255,255,.7);

    box-shadow:
    0 20px 60px
    rgba(15,23,42,.18);

    z-index:9999;

    padding:12px;

    animation:
    dropdownAnim .18s ease;
}

@keyframes dropdownAnim{

    from{
        opacity:0;
        transform:
        translateY(10px)
        scale(.98);
    }

    to{
        opacity:1;
        transform:
        translateY(0)
        scale(1);
    }

}

.profile-dropdown:hover .dropdown-menu{
    display:block;
}

/* =====================================================
MENU LINKS
===================================================== */

.dropdown-menu a{

    padding:13px 14px;

    display:flex;
    align-items:center;
    gap:14px;

    text-decoration:none;

    color:#1e293b;

    font-size:14px;

    font-weight:600;

    transition:all .2s ease;

    border-radius:16px;

    margin-bottom:4px;
}

/* =====================================================
ICON
===================================================== */

.dropdown-menu a svg{

    width:18px;
    height:18px;

    flex-shrink:0;

    stroke-width:2;

    color:#475569;
}

/* =====================================================
HOVER
===================================================== */

.dropdown-menu a:hover{

    background:
    linear-gradient(
        135deg,
        #eef2ff,
        #f8fafc
    );

    color:#4f46e5;

    transform:
    translateX(2px);
}

.dropdown-menu a:hover svg{
    color:#4f46e5;
}

/* =====================================================
LOGOUT
===================================================== */

.logout-link{

    color:#ef4444 !important;

    margin-top:6px;
}

.logout-link svg{
    color:#ef4444 !important;
}

.logout-link:hover{

    background:
    linear-gradient(
        135deg,
        #fef2f2,
        #fff1f2
    ) !important;

    color:#dc2626 !important;
}

/* =====================================================
DIVIDER
===================================================== */

.dropdown-divider{

    height:1px;

    background:
    linear-gradient(
        to right,
        transparent,
        #e2e8f0,
        transparent
    );

    margin:10px 0;
}

/* =====================================================
MAIN CONTENT
===================================================== */

.main-content{
    padding:30px;
}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:900px){

    .topbar{
        padding:0 18px;
    }

    .topbar-menu{
        display:none;
    }

    .profile-info{
        display:none;
    }

    .main-content{
        padding:20px;
    }

}



.login-wrapper{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

.login-header{
    margin-bottom:30px;
}

.login-header img{
    width:180px;
    height:auto;
}

.login-card{
    width:100%;
    max-width:430px;
    background:#fff;
    border-radius:18px;
    padding:40px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.login-footer{
    margin-top:30px;
    font-size:14px;
    color:#666;
    text-align:center;
}

/* Heading */

.login-card h1,
.login-card h2{
    text-align:center;
  
    color:#4f46e5;
    font-size:25px;
    font-weight:700;
}

/* Inputs */

.login-card input[type=text],
.login-card input[type=email],
.login-card input[type=password]{
    width:100%;
    height:52px;
    padding:0 18px;
   
    border:1px solid #d7dbe8;
    border-radius:10px;
    background:#f8f9fd;
    font-size:16px;
    transition:.25s;
}

.login-card input:focus{
    outline:none;
    border-color:#4f46e5;
    background:#fff;
    box-shadow:0 0 0 3px rgba(79,70,229,.15);
}

/* Button */

.login-card button,
.login-card input[type=submit]{
    width:100%;
    height:52px;
    border:none;
    border-radius:10px;
    background:#4f46e5;
    color:#fff;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

.login-card button:hover,
.login-card input[type=submit]:hover{
    background:#4338ca;
}

/* Links */

.login-card a{
    color:#4f46e5;
    text-decoration:none;
    font-weight:600;
}

.login-card a:hover{
    text-decoration:underline;
}

/* Responsive */

@media(max-width:576px){

    .login-card{
        padding:28px 24px;
    }

    .login-card h1,
    .login-card h2{
        font-size:28px;
    }

    .login-header img{
        width:150px;
    }

}


.py-3{ line-height:20px;}

.flex{overflow:hidden; }

/*---header--*/
.preview-card-text{  white-space: pre-wrap; }
.project-topbar-modern{  border-radius:14px; padding:22px 28px;  display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid #eef2f7; box-shadow: 0 10px 30px rgba(15,23,42,.04); margin-bottom:30px; overflow:auto; 
    
    
        position:sticky;
    top:0;
    z-index:999;
    background:#fff;
    border-radius:14px;
    transition:all .25s ease;
    
} 
/* LEFT */ .project-info-modern{ display:flex; align-items:center; gap:18px; min-width:max-content; } 
.project-avatar{ width:58px; height:58px; border-radius:18px; background: linear-gradient( 135deg, #2563eb, #7c3aed ); display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; font-weight:800; } 
.project-title-modern{ font-size:24px; font-weight:800; color:#111827; line-height:1.2; } 
.project-domain-modern{ margin-top:6px; font-size:13px; color:#64748b; } 
/* CENTER */ .project-tabs-modern{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:max-content; } 
.project-tabs-modern a{ text-decoration:none; padding:8px 12px; border-radius:10px; font-size:14px; font-weight:600; color:#6b7280; transition:.25s; white-space:nowrap; } .project-tabs-modern a:hover{ background:#f8fafc; color:#111827 !important; } .active-tab-modern{ background:#2563eb; color:#fff !important; box-shadow: 0 8px 20px rgba(37,99,235,.25); } /* RIGHT */ .project-topbar-actions{ min-width:max-content; } .back-btn-modern{ text-decoration:none; background:#f8fafc; margin-left:5px;color:#475569; padding:12px 18px; border-radius:14px; font-size:14px; font-weight:700; transition:.25s; } .back-btn-modern:hover{ background:#111827; color:#fff; } /* MOBILE */ @media(max-width:1200px){ .project-topbar-modern{ flex-direction:column; align-items:flex-start; } .project-tabs-modern{ width:100%; overflow:auto; padding-bottom:4px; } }

.flex{ overflow: hidden;}
.project-table{
border-collapse:collapse;
width:max-content;
min-width:100%;
}

.project-table thead{
background:#edf2f6 ;
 
}
.noborder input{border:none; }

.project-table th{
padding:18px 14px;
font-size:15px;
color:#6b7280;
text-align:left;
white-space:nowrap;
font-weight:600;
}

.project-table td{
padding:12px 14px;
border-bottom:1px solid #f1f1f1;
vertical-align:middle;
white-space:nowrap;
font-size:14px;
}

.project-table tr:hover{
background:#f9fafb;
}

.project-table td:nth-child(1){
min-width:50px;
}

.project-table td:nth-child(2){
min-width:180px;
}

.project-table td:nth-child(3){
min-width:200px;
white-space:normal;
}

.project-table td:nth-child(4){
min-width:120px;
}

.project-table td:nth-child(5){
min-width:120px;
}

.project-table td:nth-child(6){
min-width:120px;
}

.project-table td:nth-child(7){
min-width:150px;
}

.project-table td:nth-child(8){
min-width:100px;
}

.project-table td:nth-child(9){
min-width:180px;
}

.project-table tbody tr:nth-child(odd){
background:#ffffff;
}

.project-table tbody tr:nth-child(even){
background:#f9fafb;
}

.project-table td a{font-size:16px; }

.table-scroll{
width:100%;
overflow-x:auto;
overflow-y:hidden;
display:block;
}

.blog-table{
border-collapse:collapse;
width:max-content;
min-width:100%;
}

.blog-table thead{
background:#f3f4f6;
}

.blog-table th{
padding:10px;
font-size:14px;
color:#6b7280;
text-align:left;
white-space:nowrap;
}

.blog-table td{
padding:6px;
border-bottom:1px solid #f1f1f1;
vertical-align:middle;
}

.blog-input{
width:100%;
background:#f9fafb;
border:none;
padding:6px;
border-radius:6px;
font-size:12px;
}

.blog-textarea{
width:100%;
background:#f9fafb;
border:none;
padding:6px;
border-radius:6px;
font-size:12px;
min-height:40px;
resize:vertical;
}

.progress-pill{
border:none;
padding:5px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

.pending{
background:#fef3c7;
color:#92400e;
}

.progressing{
background:#dbeafe;
color:#1e40af;
}

.done{
background:#dcfce7;
color:#166534;
}

.action-btn{
font-size:12px;
font-weight:600;
margin-right:8px;
border:none;
background:none;
cursor:pointer;
}

.blog-table th,
.blog-table td{
width:auto;
}
.keyword-wrapper{
border:1px solid #e5e7eb;
border-radius:8px;
padding:8px;
background:#fff;
min-width:180px;
display:flex;
flex-wrap:wrap;
gap:6px;
align-items:center;
}

.keyword-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
}

.keyword-tag{
background:#f3f4f6;
padding:6px 10px;
border-radius:20px;
font-size:12px;
display:flex;
align-items:center;
gap:6px;
}

.remove-keyword{
color:red;
cursor:pointer;
font-weight:bold;
}

.keyword-input{
border:none;
outline:none;
padding:6px;
font-size:12px;
min-width:140px;
}
.width{width:600px !important ; }





.overview-wrapper{
display:flex;
flex-direction:column;
gap:24px;
padding:25px 0px;
}

.overview-card{
background:#fff;
border-radius: 20px;
padding:28px;
box-shadow:0 4px 30px rgba(0,0,0,.04);
border:1px solid #eef2f7;
overflow:hidden;
margin-bottom:35px;
}

.section-title{
font-size:24px;
font-weight:600;
color:#003263;
}

.overview-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:20px;
}
/* =====================================================
METRIC CARDS
===================================================== */

.metric-card{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:180px;
padding:30px;
border-radius:26px;
overflow:hidden;
color:#fff;
}

.metric-card h4{
font-size:15px;
margin:0 0 18px;
opacity:.95;
}

.metric-card h2{
font-size:56px;
line-height:1;
margin:0;
font-weight:800;
word-break:break-word;
}

.metric-growth{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 16px;
border-radius:999px;
font-size:13px;
font-weight:700;
margin-top:22px;
width:max-content;
background:rgba(255,255,255,.18);
}

.blue{
background:linear-gradient(135deg,#4285F4,#2563eb);
}

.purple{
background:linear-gradient(135deg,#7c3aed,#5b21b6);
}

.green{
background:linear-gradient(135deg,#16a34a,#15803d);
}

.orange{
background:linear-gradient(135deg,#f97316,#ea580c);
}

/* =====================================================
TABLE
===================================================== */

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

.report-table th{
padding:16px;
background:#f8fafc;
font-size:14px;
text-align:left;
font-weight:700;
}

.report-table td{
padding:8px 16px;
border-top:1px solid #e5e8ed;
font-size:14px;
vertical-align:top;
color:#666;
}

/* =====================================================
SCROLL AREA
===================================================== */

.scroll-area{
max-height:none !important;
overflow:visible !important;
}

/* =====================================================
BUTTONS
===================================================== */

.download-report-btn,
.download-btn{
padding:16px 24px;
background:#000;
color:#fff;
border:none;
border-radius:18px;
font-weight:700;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:10px;
}

/* =====================================================
CHART
===================================================== */

.chart-area{
height:320px;
position:relative;
}

/* =====================================================
TASK TABLE
===================================================== */

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

.task-table thead{
background:#f3f4f6;
}

.task-table th{
padding:10px;
font-size:16px;
color:#6b7280;
text-align:left;
}

.task-row td{
padding:8px;
border-bottom:1px solid #f1f1f1;
vertical-align:middle;
}

.week-box{
background:#f9fafb;
text-align:center;
font-weight:600;
border-radius:8px;
width:120px;
font-size:13px;
padding:10px;
}

/* =====================================================
BLOG TABLE
===================================================== */

.blog-table{
border-collapse:collapse;
width:max-content;
min-width:100%;
}

.blog-table thead{
background:#f3f4f6;
}

.blog-table th{
padding:10px;
font-size:14px;
color:#6b7280;
text-align:left;
white-space:nowrap;
}

.blog-table td{
padding:6px;
border-bottom:1px solid #f1f1f1;
vertical-align:middle;
}

/* =====================================================
GOOGLE SECTION
===================================================== */

.google-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
}

.google-card,
.google-section{
background:#fff;
padding:24px;
border-radius:24px;
border:1px solid #f1f1f1;
box-shadow:0 4px 20px rgba(0,0,0,.03);
}

.google-title{
font-size:20px;
font-weight:700;
margin-bottom:18px;
}

/* =====================================================
PRINT CSS
===================================================== */

@media print{

html,
body{
background:#fff !important;
margin:0 !important;
padding:0 !important;
font-size:12px !important;
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}

.overview-wrapper{
gap:20px !important;
}

.overview-card{
box-shadow:none !important;
border:1px solid #dbe3ea !important;
border-radius:18px !important;
padding:20px !important;
overflow:visible !important;
page-break-inside:auto !important;
break-inside:auto !important;
}

.metric-card{
min-height:160px !important;
padding:24px !important;
}

.metric-card h2{
font-size:44px !important;
line-height:1.1 !important;
}

.metric-growth{
font-size:12px !important;
padding:8px 14px !important;
margin-top:16px !important;
}

.scroll-area{
max-height:none !important;
overflow:visible !important;
}

.report-table{
width:100% !important;
table-layout:auto !important;
border-collapse:collapse !important;
}

.report-table tr{
page-break-inside:avoid !important;
}

.report-table thead{
display:table-header-group !important;
}

.download-report-btn{
display:none !important;
}

}

.compare-form{
width:100%;
}

.compare-grid{
display:grid;
grid-template-columns:
repeat(5,minmax(180px,1fr));
gap:18px;
}

.compare-field label{
display:block;
font-size:13px;
font-weight:700;
margin-bottom:8px;
color:#6b7280;
}

.compare-input{
width:100%;
height:48px;
border:1px solid #e5e7eb;
border-radius:14px;
padding:0 14px;
font-size:14px;
outline:none;
background:#fff;
}

.compare-input:focus{
border-color:#4f46e5;
}

.compare-btn-wrap{
margin-top:22px;
}

.compare-btn{
height:48px;
padding:0 28px;
background:#4f46e5;
color:#fff;
border:none;
border-radius:14px;
font-size:14px;
font-weight:700;
cursor:pointer;
}

.compare-btn:hover{
opacity:.92;
}

.filter-card{ margin-bottom:10px; } .filter-grid{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .filter-label{ display:block; font-size:14px; font-weight:700; margin-bottom:10px; color:#475569; } .filter-input{ width:100%; height:52px; border:1px solid #dbe3ea; border-radius:16px; padding:0 16px; font-size:15px; background:#fff; outline:none; } .filter-input:focus{ border-color:#6366f1; box-shadow:0 0 0 4px rgba(99,102,241,.08); } .apply-filter-btn{ height:54px; padding:0 28px; border:none; border-radius:18px; background:linear-gradient(135deg,#4f46e5,#4338ca); color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
.modern-report-panel{
background:#fff;
border-radius:34px;
padding:34px;
border:1px solid #eef2f7;
box-shadow:
0 8px 40px rgba(0,0,0,.04);
overflow:hidden;
margin-bottom:32px;
}

/* =========================================================
HEADER
========================================================= */

.report-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
margin-bottom:32px;
flex-wrap:wrap;
}

.report-badge{
display:inline-flex;
align-items:center;
padding:9px 16px;
border-radius:999px;
font-size:12px;
font-weight:800;
letter-spacing:.5px;
margin-bottom:18px;
text-transform:uppercase;
}

.blue-badge{
background:
linear-gradient(
135deg,
#dbeafe,
#bfdbfe
);

color:#2563eb;
}

.purple-badge{
background:
linear-gradient(
135deg,
#f3e8ff,
#ede9fe
);

color:#7c3aed;
}

.report-title{
font-size:24px;
font-weight:600;
line-height:1.1;

color:#111827;
margin:10px 0px 10px 0px;

}

.report-subtitle{
font-size:15px;
color:#6b7280;
margin:0px;
line-height:1.7;
}

.report-date{
background:#f9fafb;
padding:18px 24px;
border-radius:20px;
border:1px solid #eef2f7;
min-width:240px;
}

.report-date-label{
font-size:12px;
font-weight:700;
color:#6b7280;
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:.5px;
}

.report-date-value{
font-size:18px;
font-weight:800;
color:#111827;
}

/* =========================================================
GRID
========================================================= */

.modern-kpi-grid{
display:grid;
grid-template-columns:
repeat(4,minmax(0,1fr));
gap:24px;
margin-top:30px;
}

.modern-kpi-grids{
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:24px;
margin-top:30px;
}

.rlink
{color:green; font-size:12px;text-decoration:none; }

/* =====================================================
REPORT HEADER
===================================================== */
.report-info-icon{

    width:42px;
    height:42px;

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

    border-radius:14px;

    background:rgba(37,99,235,0.10);

    border:1px solid rgba(37,99,235,0.15);

    backdrop-filter:blur(10px);

    color:#2563eb;

    font-size:16px;

    flex-shrink:0;

}

.report-head{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:40px;




    position:relative;



}

/* =====================================================
LEFT SIDE
===================================================== */

.report-head-left{

    flex:1;

    display:flex;
    flex-direction:column;

    justify-content:flex-start;
    align-items:flex-start;

}

.report-logo-wrap{

    display:flex;
    flex-direction:column;
    align-items:flex-start;

}

.report-logos{

    width:180px;
    height:auto;

    display:block;

    margin-bottom:12px;

}



.report-main-title{

    font-size:25px;
    font-weight:800;

    line-height:1.1;

    color:#0d3263;

    margin-bottom:10px;

    letter-spacing:-1px;

}

.report-sub-title{

    font-size:15px;

    line-height:1.7;

    color:#64748b;

    max-width:520px;

}

/* =====================================================
RIGHT SIDE
===================================================== */

.report-head-right{

    flex:1;

    display:flex;
    flex-direction:column;

    align-items:flex-end;
    justify-content:flex-start;

    gap:18px;

    text-align:right;

}

/* =====================================================
DOMAIN BOX
===================================================== */

.report-domain-box{

    margin-bottom:4px;

}

/* =====================================================
PROJECT TITLE
===================================================== */

.report-project-title{

    font-size:34px;

    font-weight:600;

    color:#666;

    line-height:1.05;

    text-align:right;

    letter-spacing:-2px;

    max-width:900px;

}

/* =====================================================
META SECTION
===================================================== */

.report-report-meta{

    display:flex;
    align-items:center;

    gap:16px;

    flex-wrap:wrap;

    justify-content:flex-end;

}

/* =====================================================
INFO CARD
===================================================== */

.report-info-item{

    display:flex;
    align-items:center;

    gap:12px;

    background:#f8fafc;


    border-radius:16px;

    font-size:14px;

    color:#475569;


    border:1px solid #eef2f7;

}

/* =====================================================
ICON
===================================================== */

.report-info-icon{

    width:38px;
    height:38px;

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

    background:#e2e8f0;

    border-radius:999px;

    font-size:16px;

    flex-shrink:0;

}

/* =====================================================
TEXT
===================================================== */

.report-info-text{

    line-height:1.5;

    white-space:nowrap;

}

/* =====================================================
SECTION TITLE OVERRIDE
===================================================== */

.section-title{

    margin:0;

    padding:0;

}

/* =========================================================
COMMON CARD
========================================================= */

.modern-kpi-card{
position:relative;
overflow:hidden;
border-radius:20px;
padding:30px;
min-height:200px;
transition:.3s;
border:1px solid #ebebeb;

}

.modern-kpi-card:hover{
transform:translateY(-6px);
box-shadow:
0 18px 45px rgba(0,0,0,.12);
}

/* =========================================================
VISITS & ENGAGEMENT COLORS
========================================================= */

.users-card{

background:
linear-gradient(
135deg,
#2563eb 0%,
#1d4ed8 100%
);

color:#fff;
}

.active-card{

background:
linear-gradient(
135deg,
#7c3aed 0%,
#6d28d9 100%
);

color:#fff;
}

.session-card{

background:
linear-gradient(
135deg,
#00b67a 0%,
#008f5d 100%
);

color:#fff;
}

.bounce-card{

background:#fff;
border:1px solid #e5e7eb;

}

/* =========================================================
GOOGLE SEARCH CONSOLE COLORS
========================================================= */

.clicks-card{

background:
linear-gradient(
135deg,
#ff8800 0%,
#ff6b00 100%
);

color:#fff;
}

.impressions-card{

background:
linear-gradient(
135deg,
#ff4f87 0%,
#8b3dff 100%
);

color:#fff;
}

.ctr-card{

background:
linear-gradient(
135deg,
#00b67a 0%,
#008f5d 100%
);

color:#fff;
}

.position-card{

background:#fff;
border:1px solid #e5e7eb;

}

/* =========================================================
BACKGROUND ICON
========================================================= */

.modern-kpi-bg{
position:absolute;
right:-10px;
top:-10px;
font-size:110px;
opacity:.08;
pointer-events:none;
}

/* =========================================================
TOP
========================================================= */

.modern-kpi-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
position:relative;
z-index:2;
}

.modern-kpi-label{
font-size:15px;
font-weight:700;
margin-bottom:18px;
opacity:.95;
}

.modern-kpi-main{
font-size:43px;
font-weight:900;
line-height:1;

color:#16a34a;
}

/* =========================================================
GROWTH BADGE
========================================================= */

.modern-kpi-growth{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 12px;
border-radius:999px;
font-size:13px;
font-weight:800;
backdrop-filter:blur(10px);
min-width:90px;
}

.growth-up{
background:rgba(220,252,231,.92);
color:#16a34a;
}

.growth-down{
background:rgba(254,226,226,.92);
color:#dc2626;
}

/* =========================================================
BOTTOM
========================================================= */

.modern-kpi-bottom{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;

padding-top:22px;
position:relative;
z-index:2;
}

.users-card .modern-kpi-bottom,
.active-card .modern-kpi-bottom,
.session-card .modern-kpi-bottom,
.clicks-card .modern-kpi-bottom,
.impressions-card .modern-kpi-bottom,
.ctr-card .modern-kpi-bottom{

border-top:
1px solid rgba(255,255,255,.16);

}

.bounce-card .modern-kpi-bottom,
.position-card .modern-kpi-bottom{

border-top:
1px solid #eef2f7;

}

/* =========================================================
COMPARE
========================================================= */

.compare-box{
display:flex;
flex-direction:column;
gap:6px;
}

.compare-label{
font-size:12px;
font-weight:700;
opacity:.8;
text-transform:uppercase;
letter-spacing:.5px;
}

.compare-value{
font-size:18px;
font-weight:800;
}

.compare-divider{
font-size:18px;
font-weight:900;
opacity:.7;

   
    line-height:normal;
}

/* =========================================================
TEXT COLORS
========================================================= */

.users-card .modern-kpi-label,
.users-card .modern-kpi-main,
.users-card .compare-value,

.active-card .modern-kpi-label,
.active-card .modern-kpi-main,
.active-card .compare-value,

.session-card .modern-kpi-label,
.session-card .modern-kpi-main,
.session-card .compare-value,

.clicks-card .modern-kpi-label,
.clicks-card .modern-kpi-main,
.clicks-card .compare-value,

.impressions-card .modern-kpi-label,
.impressions-card .modern-kpi-main,
.impressions-card .compare-value,

.ctr-card .modern-kpi-label,
.ctr-card .modern-kpi-main,
.ctr-card .compare-value{
color:#fff;
}

.bounce-card .modern-kpi-label,
.bounce-card .modern-kpi-main,
.bounce-card .compare-value,

.position-card .modern-kpi-label,
.position-card .modern-kpi-main,
.position-card .compare-value{
color:#111827;
}

.traffic-panel{
margin-top:30px;
}

/* =========================================================
HEADER
========================================================= */

.traffic-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
margin-bottom:28px;
flex-wrap:wrap;
}

.traffic-title{
font-size:38px;
font-weight:900;
line-height:1.1;
letter-spacing:-1px;
color:#111827;
margin-bottom:10px;
}

.traffic-subtitle{
font-size:15px;
color:#6b7280;
line-height:1.7;
}

.traffic-period-box{
background:#f8fafc;
padding:18px 24px;
border-radius:18px;
border:1px solid #eef2f7;
min-width:230px;
}

.traffic-period-label{
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.5px;
color:#6b7280;
margin-bottom:8px;
}

.traffic-period-value{
font-size:17px;
font-weight:800;
color:#111827;
}

/* =========================================================
TABLE
========================================================= */

.traffic-table-wrap{
overflow:auto;
border-radius:24px;
}

.traffic-table{
width:100%;
border-collapse:collapse;
/*min-width:900px;*/
}

.traffic-table thead tr{
background:#f8fafc;
}

.traffic-table th{
padding:22px 18px;
font-size:14px;
font-weight:800;
text-align:left;
color:#111827;
border-bottom:1px solid #eef2f7;
}

.traffic-table td{
padding:12px 18px;
border-bottom:1px solid #eef2f7;
vertical-align:middle;
}

/* =========================================================
EVENT NAME
========================================================= */

.traffic-channel{
display:flex;
align-items:center;
gap:16px;
}

.traffic-channel-icon{
width:52px;
height:52px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;

background:
linear-gradient(
135deg,
#dbeafe,
#bfdbfe
);

}

.traffic-channel-name{
font-size:16px;
font-weight:800;
color:#111827;
margin-bottom:4px;
}

.traffic-channel-sub{
font-size:13px;
color:#6b7280;
}

/* =========================================================
NUMBERS
========================================================= */

.traffic-number{
font-size:18px;
font-weight:900;
color:#111827;
margin-bottom:6px;
}

.traffic-date{
font-size:12px;
color:#6b7280;
}

/* =========================================================
GROWTH
========================================================= */

.growth-bar-wrap{
width:100%;
}

.growth-bar{
height:42px;
border-radius:999px;
display:flex;
align-items:center;
padding:0 16px;
font-size:14px;
font-weight:800;
min-width:160px;
}

.growth-green{
background:#dcfce7;
color:#15803d;
}

.growth-red{
background:#fee2e2;
color:#b91c1c;
}

/* =========================================================
HOVER
========================================================= */

.traffic-table tbody tr{
transition:.2s;
}

.traffic-table tbody tr:hover{
background:#fafafa;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:768px){

.traffic-title{
font-size:30px;
}

.traffic-table{
min-width:800px;
}

}

/* Google Area */


/* =========================================
GLOBAL
========================================= */

.google-dashboard{
display:flex;
flex-direction:column;
gap:28px;
}

.google-panel{
background:#fff;
border-radius: 20px;
padding:28px;
border:1px solid #edf2f7;
box-shadow:
0 10px 40px rgba(15,23,42,.05);
}

.section-title{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:14px;

}

.section-title h2{
font-size:24px;
font-weight:600;
margin:0px 0px 10px 0px;
color:#111827;
}

.section-title p{
font-size:14px;
color:#6b7280;
margin-top:6px;
}

/* =========================================
HEADER
========================================= */

.google-header{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:20px;
}

.google-title{
font-size:30px;
font-weight:800;
margin:0;
color:#111827;
}

.google-subtitle{
font-size:14px;
color:#6b7280;
margin-top:6px;
}

.google-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.google-btn{
height:52px;
padding:0 22px;
border:none;
border-radius:16px;
font-size:14px;
font-weight:700;
display:inline-flex;
align-items:center;
gap:10px;
cursor:pointer;
text-decoration:none;
transition:.2s;
}

.google-btn-primary{
background:#2563eb;
color:#fff;
}

.google-btn-danger{
background:#fee2e2;
color:#991b1b;
}

/* =========================================
FORMS
========================================= */

.google-form-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));
gap:20px;
margin-top:24px;
}

.google-field label{
display:block;
margin-bottom:8px;
font-size:13px;
font-weight:700;
color:#6b7280;
}

.google-input,
.google-select{
width:100%;
height:54px;
padding:0 16px;
border-radius:16px;
border:1px solid #dbe2ea;
font-size:14px;
outline:none;
}

/* =========================================
KPI CARDS
========================================= */

.stats-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));
gap:22px;
}

.kpi-card{
position:relative;
overflow:hidden;
border-radius: 20px;
padding:26px;
background:#fff;
border:1px solid #edf2f7;
box-shadow:
0 10px 35px rgba(15,23,42,.05);
}

.kpi-card::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:linear-gradient(
90deg,
#2563eb,
#7c3aed
);
}

.kpi-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:22px;
}

.kpi-title{
font-size:14px;
font-weight:700;
color:#6b7280;
}

.kpi-icon{
width:54px;
height:54px;
border-radius:18px;
background:#f8fafc;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
}

.kpi-value{
font-size:42px;
font-weight:800;
line-height:1;
margin-bottom:16px;
}

.kpi-bottom{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

.kpi-period{
font-size:13px;
color:#6b7280;
font-weight:600;
}

.kpi-change{
padding:8px 14px;
border-radius:999px;
font-size:13px;
font-weight:700;
}

.kpi-up{
background:#dcfce7;
color:#166534;
}

.kpi-down{
background:#fee2e2;
color:#991b1b;
}

/* =========================================
PERFORMANCE OVERVIEW
========================================= */

.performance-wrapper{
background:#fff;
border-radius: 20px;
overflow:hidden;
border:1px solid #e5e7eb;
}

.performance-top{
display:flex;
flex-wrap:wrap;
border-bottom:1px solid #eef2f7;
}

.performance-metric{
flex:1;
min-width:240px;
padding:24px;
position:relative;
color:#fff;
}

.performance-blue{
background:#4285F4;
}

.performance-purple{
background:#673AB7;
}

.performance-orange{
background:#f59e0b;
}

.performance-green{
background:#10b981;
}

.performance-label{
font-size:14px;
font-weight:600;
margin-bottom:14px;
display:flex;
align-items:center;
gap:10px;
}

.performance-number{
font-size:42px;
font-weight:800;
line-height:1;
margin-bottom:14px;
}

.performance-compare{
font-size:13px;
font-weight:600;
opacity:.95;
}

.performance-chart{
height:430px;
padding:24px;
}

/* =========================================
TABLE
========================================= */

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

.google-table th{
background:#f8fafc;
padding:16px;
font-size:13px;
font-weight:700;
text-align:left;
}

.google-table td{
padding:16px;
border-top:1px solid #eef2f7;
}


.tab{Font-size:24px; }

.gauge-wrap{
width:140px;
height:70px;
overflow:hidden;
position:relative;
margin:auto;
}

.gauge{
width:140px;
height:140px;
border-radius:50%;
background:
conic-gradient(
#ea7a39 0deg,
#ea7a39 calc(var(--value) * 1.8deg),
#f3e9e4 calc(var(--value) * 1.8deg),
#f3e9e4 180deg
);
transform:rotate(-90deg);
position:absolute;
top:0;
left:0;
}

.gauge::after{
content:'';
position:absolute;
width:110px;
height:110px;
background:#fff;
border-radius:50%;
top:15px;
left:15px;
}

.gauge-value{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
font-size:34px;
font-weight:800;
color:#111827;
z-index:2;
}

.wave-chart{
width:140px;
height:80px;
position:relative;
}

.wave-chart svg{
width:100%;
height:100%;
}

.wave-line{
fill:none;
stroke:#ea7a39;
stroke-width:6;
stroke-linecap:round;
stroke-linejoin:round;
}

.wave-dot{
fill:#fff;
stroke:#ea7a39;
stroke-width:5;
}

.mini-wave-chart{
width:110px;
height:60px;
opacity:.95;
}

.mini-wave-chart svg{
width:100%;
height:100%;
overflow:visible;
}

.wave-path{
fill:none;
stroke:rgba(255,255,255,.95);
stroke-width:5;
stroke-linecap:round;
stroke-linejoin:round;
filter:drop-shadow(0 3px 8px rgba(255,255,255,.25));
}

/* =========================================================
SAFE GOOGLE ANALYTICS OVERVIEW
========================================================= */

.ga-overview-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));
gap:24px;
margin-top:24px;
}

.ga-card{
position:relative;
overflow:hidden;
border-radius:26px;
padding:28px;
color:#fff;
min-height:210px;
}

.ga-card::after{
content:'';
position:absolute;
top:-45px;
right:-45px;
width:140px;
height:140px;
border-radius:999px;
background:rgba(255,255,255,.08);
}

.ga-card h4{
font-size:15px;
font-weight:700;
margin:0 0 18px;
opacity:.95;
position:relative;
z-index:2;
}

.ga-card h2{
font-size:35px;
font-weight:800;
line-height:1;
margin:0 0 18px;
position:relative;
z-index:2;
}

.ga-growth{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: 13px;
    font-weight: 700;
    position: absolute;
    z-index: 2;
    right: 29px;
    bottom: 12%;
}

.ga-bottom{
position:absolute;
bottom:24px;
left:28px;
right:28px;
display:flex;
justify-content:space-between;
align-items:center;
font-size:13px;
font-weight:600;
opacity:.95;
z-index:2;
}

.ga-blue{
background:linear-gradient(
135deg,
#4285F4,
#2563eb
);
}

.ga-purple{
background:linear-gradient(
135deg,
#7c3aed,
#673AB7
);
}

.ga-green{
background:linear-gradient(
135deg,
#10b981,
#059669
);
}

.ga-orange{
background:linear-gradient(
135deg,
#f59e0b,
#d97706
);
}
.ga-teal{
background:linear-gradient(
135deg,
#06b6d4,
#0891b2
);
}


.shadow{    width: 30px;
    height: 30px; }
.project-topbar{

    display:flex;

    align-items:center;

    gap:22px;

    margin-bottom:26px;

    flex-wrap:wrap;
}


.project-title-wrap{

    display:flex;

    align-items:center;

    gap:16px;

    min-width:max-content;
}


.project-icon{

    width:58px;

    height:58px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #635bff,
        #4f46e5
    );

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:#fff;

    box-shadow:
    0 10px 30px rgba(99,91,255,.18);
}


.project-title{

    font-size:32px;

    font-weight:800;

    color:#111827;

    line-height:1.1;

    margin:0;
}


.project-subtitle{

    margin-top:4px;

    color:#6b7280;

    font-size:14px;
}


.project-search-wrap{

    flex:1;

    position:relative;

    min-width:280px;
}


.search-icon{

    position:absolute;

    top:50%;

    left:18px;

    width:20px;

    height:20px;

    transform:translateY(-50%);

    color:#9ca3af;
}


#projectSearch, #companySearch{

    width:100%;

    height:56px;

    border-radius:18px;

    border:1px solid #dbe3ef;

    padding:0 18px 0 52px;

    font-size:15px;

    background:#fff;

    transition:.25s ease;

    box-shadow:
    0 4px 14px rgba(15,23,42,.04);
}


#projectSearch:focus{

    outline:none;

    border-color:#635bff;

    box-shadow:
    0 0 0 4px rgba(99,91,255,.12),
    0 10px 30px rgba(99,91,255,.12);
}


.project-add-btn{

    height:56px;

    padding:0 24px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #635bff,
        #4f46e5
    );

    color:#fff;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    box-shadow:
    0 10px 30px rgba(99,91,255,.18);

    transition:.25s ease;
}


.project-add-btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 16px 40px rgba(99,91,255,.24);
}


.project-add-btn span{

    font-size:22px;

    line-height:1;
}

.priority-badge{
    font-size:10px;
    padding:4px 8px;
    border-radius:20px;
    font-weight:600;
    min-width:60px;
    text-align:center;
}

.priority-badge.low{
    background:#dcfce7;
    color:#166534;
}

.priority-badge.medium{
    background:#fef3c7;
    color:#92400e;
}

.priority-badge.high{
    background:#fee2e2;
    color:#991b1b;
}
.status-select.pending{
    background:#fef3c7;
    color:#92400e;
}

.status-select.progress{
    background:#dbeafe;
    color:#1e40af;
}

.status-select.done{
    background:#dcfce7;
    color:#166534;
}


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

.task-table thead{
    background:#f3f4f6;
}

.task-table th{
    padding:10px;
    font-size:14px;
    color:#6b7280;
    text-align:left;
}

.task-row td{
    padding:6px;
    border-bottom:1px solid #f1f1f1;
    vertical-align:middle;
}

.week-box{
    background:#f9fafb;
    text-align:center;
    font-weight:600;
    border-radius:8px;
    width:120px;
    font-size:13px;
    padding:10px;
}

.activity-input{
    width:100%;
    border:none;
    background:#f9fafb;
    padding:8px;
    border-radius:6px;
}

.small-input{
    width:100%;
    background:#f9fafb;
    border:none;
    padding:8px;
    border-radius:6px;
    min-height:38px;
    font-size:12px;
}

.progress-pill{
    border:none;
    padding:8px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.pending{
    background:#fef3c7;
    color:#92400e;
}

.progressing{
    background:#dbeafe;
    color:#1e40af;
}

.done{
    background:#dcfce7;
    color:#166534;
}

.filter-box{
    display:flex;
    gap:15px;
    align-items:end;
    margin-bottom:20px;
    background:#f9fafb;
    padding:15px;
    border-radius:10px;
    flex-wrap:wrap;
}

.filter-box label{
    font-size:13px;
    font-weight:600;
    display:block;
    margin-bottom:5px;
}

.add-task-row{
    display:grid;
   grid-template-columns:
120px
1fr
120px
160px
180px
100px;
    gap:10px;
    margin-bottom:10px;
}


@media(max-width:768px){

.ga-card h2{
font-size:30px;
}

.ga-bottom{
flex-direction:column;
align-items:flex-start;
gap:6px;
}

}




.sf-wrap{
  --sf-bg:#f4f6f8;--sf-white:#ffffff;--sf-border:#e5e7eb;--sf-border2:#d1d5db;
  --sf-text:#111827;--sf-muted:#6b7280;--sf-faint:#9ca3af;
  --sf-blue:#2563eb;--sf-blue-l:#eff6ff;--sf-blue-b:#bfdbfe;
  --sf-green:#16a34a;--sf-green-l:#f0fdf4;--sf-green-b:#bbf7d0;
  --sf-amber:#d97706;--sf-amber-l:#fffbeb;--sf-amber-b:#fde68a;
  --sf-red:#dc2626;--sf-red-l:#fef2f2;--sf-red-b:#fecaca;
  --sf-purple:#7c3aed;--sf-purple-l:#f5f3ff;--sf-purple-b:#ddd6fe;
  --bg:var(--sf-bg);--white:var(--sf-white);--border:var(--sf-border);--border2:var(--sf-border2);
  --text:var(--sf-text);--muted:var(--sf-muted);--faint:var(--sf-faint);
  --blue:var(--sf-blue);--blue-l:var(--sf-blue-l);--blue-b:var(--sf-blue-b);
  --green:var(--sf-green);--green-l:var(--sf-green-l);--green-b:var(--sf-green-b);
  --amber:var(--sf-amber);--amber-l:var(--sf-amber-l);--amber-b:var(--sf-amber-b);
  --red:var(--sf-red);--red-l:var(--sf-red-l);--red-b:var(--sf-red-b);
  --purple:var(--sf-purple);--purple-l:var(--sf-purple-l);--purple-b:var(--sf-purple-b);
  --radius:8px;--radius-lg:12px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -1px rgba(0,0,0,.04);
  --font:'Inter',sans-serif;
  font-family:var(--font);color:var(--text);font-size:14px;line-height:1.6;box-sizing:border-box;
}
.sf-wrap *{box-sizing:border-box;}
.sf-wrap .wrap{max-width:100%;margin:0 auto;}


.sf-wrap .page-header{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.sf-wrap .ph-icon{width:40px;height:40px;background:var(--blue-l);border:1px solid var(--blue-b);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.sf-wrap .ph-title{font-size:20px;font-weight:700;color:var(--text)}
.sf-wrap .ph-sub{font-size:13px;color:var(--muted)}
.sf-wrap .ph-right{margin-left:auto;display:flex;align-items:center;gap:8px}

.sf-wrap .form-box{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;margin-bottom:1.25rem;box-shadow:var(--shadow)}
.sf-wrap .form-label{font-size:13px;font-weight:600;color:var(--text);margin-bottom:.5rem;display:block}
.sf-wrap .form-row{display:flex;gap:10px;align-items:flex-start}
.sf-wrap .url-input{flex:1;border:1px solid var(--border2);border-radius:var(--radius);padding:9px 14px;font-size:13px;font-family:var(--font);color:var(--text);background:var(--white);outline:none;transition:border .2s;resize:vertical;min-height:120px}
.sf-wrap .url-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.sf-wrap .url-input::placeholder{color:var(--faint)}
.sf-wrap .form-hint{font-size:12px;color:var(--muted);margin-top:8px}
.sf-wrap .form-actions{display:flex;flex-direction:column;gap:8px;min-width:130px}

.sf-wrap .btn{padding:9px 20px;border-radius:var(--radius);border:1px solid transparent;font-size:14px;font-weight:600;font-family:var(--font);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s;white-space:nowrap;width:100%}
.sf-wrap .btn-blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.sf-wrap .btn-blue:hover{background:#1d4ed8}
.sf-wrap .btn-blue:disabled{opacity:.5;cursor:not-allowed}
.sf-wrap .btn-red{background:var(--red-l);color:var(--red);border-color:var(--red-b)}
.sf-wrap .btn-red:hover{background:#fee2e2}
.sf-wrap .btn-sm{padding:5px 12px;font-size:12px;border-radius:6px;width:auto}
.sf-wrap .btn-ghost{background:transparent;border-color:var(--border2);color:var(--text)}
.sf-wrap .btn-ghost:hover{background:var(--bg)}

.sf-wrap .prog-box{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;margin-bottom:1.25rem;box-shadow:var(--shadow);display:none}
.sf-wrap .prog-box.show{display:block}
.sf-wrap .prog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.sf-wrap .prog-lbl{font-size:13px;font-weight:600;color:var(--text)}
.sf-wrap .prog-pct{font-size:13px;font-weight:700;color:var(--blue)}
.sf-wrap .prog-track{background:var(--bg);border:1px solid var(--border);border-radius:99px;height:8px;overflow:hidden;margin-bottom:.75rem}
.sf-wrap .prog-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),#7c3aed);width:0;transition:width .4s ease}
.sf-wrap .prog-msg{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:.5rem}
.sf-wrap .spin{width:12px;height:12px;border:2px solid var(--border2);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.sf-wrap .prog-stats{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:.5rem}
.sf-wrap .prog-stats span{display:flex;align-items:center;gap:4px}
.sf-wrap .stage-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:.85rem}
.sf-wrap .spill{font-size:11px;padding:3px 10px;border-radius:99px;border:1px solid var(--border);color:var(--muted);transition:all .2s}
.sf-wrap .spill.active{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}
.sf-wrap .spill.done{border-color:var(--green-b);color:var(--green);background:var(--green-l)}

.sf-wrap .summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:1.25rem}
.sf-wrap .scard{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.875rem 1.1rem;box-shadow:var(--shadow);text-align:center;cursor:default;transition:box-shadow .15s}
.sf-wrap .scard:hover{box-shadow:var(--shadow-md)}
.sf-wrap .scard-icon{font-size:20px;margin-bottom:.3rem}
.sf-wrap .scard-num{font-size:24px;font-weight:700;margin-bottom:2px;line-height:1}
.sf-wrap .scard-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sf-wrap .scard.c-blue .scard-num{color:var(--blue)}
.sf-wrap .scard.c-red  .scard-num{color:var(--red)}
.sf-wrap .scard.c-amber .scard-num{color:var(--amber)}
.sf-wrap .scard.c-green .scard-num{color:var(--green)}
.sf-wrap .scard.c-purple .scard-num{color:var(--purple)}


.sf-wrap .health-row{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;margin-bottom:1.25rem;box-shadow:var(--shadow);display:grid;gap:1.5rem;align-items:center}
@media(max-width:540px){.health-row{grid-template-columns:1fr}}
.sf-wrap .health-ring{position:relative;width:90px;height:90px}
.sf-wrap .health-ring svg{width:90px;height:90px;transform:rotate(-90deg)}
.sf-wrap .health-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sf-wrap .health-num .n{font-size:24px;font-weight:700}
.sf-wrap .health-num .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.sf-wrap .health-info h3{font-size:16px;font-weight:700;margin-bottom:.25rem}
.sf-wrap .health-info p{font-size:13px;color:var(--muted);margin-bottom:.75rem}
.sf-wrap .issue-pills{display:flex;gap:8px;flex-wrap:wrap}
.sf-wrap .issue-pill{font-size:12px;padding:3px 10px;border-radius:99px;font-weight:600;display:flex;align-items:center;gap:4px}
.sf-wrap .ip-error{background:var(--red-l);color:var(--red);border:1px solid var(--red-b)}
.sf-wrap .ip-warn {background:var(--amber-l);color:var(--amber);border:1px solid var(--amber-b)}
.sf-wrap .ip-notice{background:var(--blue-l);color:var(--blue);border:1px solid var(--blue-b)}


.sf-wrap .tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:1.25rem;overflow-x:auto}
.sf-wrap .tab{padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;color:var(--muted);transition:all .15s;margin-bottom:-2px;white-space:nowrap}
.sf-wrap .tab.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
.sf-wrap .tab:hover:not(.on){color:var(--text)}
.sf-wrap .tp{display:none}.tp.on{display:block}


.sf-wrap .tbl-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.sf-wrap .tbl-head{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}
.sf-wrap .tbl-head h3{font-size:14px;font-weight:700}
.sf-wrap .tbl-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sf-wrap .ftag{font-size:11px;padding:3px 10px;border-radius:99px;border:1px solid var(--border2);color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap}
.sf-wrap .ftag:hover{border-color:var(--blue);color:var(--blue)}
.sf-wrap .ftag.on{background:var(--blue-l);border-color:var(--blue-b);color:var(--blue);font-weight:600}
.sf-wrap .tbl-scroll{overflow-x:auto}
.sf-wrap table{width:100%;border-collapse:collapse;min-width:900px}
.sf-wrap th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border);background:var(--bg);white-space:nowrap;cursor:pointer;user-select:none}
.sf-wrap th:hover{color:var(--text)}
.sf-wrap th .sort-arrow{opacity:.4;font-size:10px;margin-left:3px}
.sf-wrap th.sort-asc .sort-arrow:after{content:'↑';opacity:1}
.sf-wrap th.sort-desc .sort-arrow:after{content:'↓';opacity:1}
.sf-wrap td{padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle}
.sf-wrap tr:last-child td{border-bottom:none}
.sf-wrap tr:hover td{background:#fafbfc}
.sf-wrap .url-cell{color:var(--blue);cursor:pointer;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.sf-wrap .url-cell:hover{text-decoration:underline}


.sf-wrap .badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:700;white-space:nowrap;gap:3px}
.sf-wrap .b-ok    {background:var(--green-l);color:var(--green);border:1px solid var(--green-b)}
.sf-wrap .b-error {background:var(--red-l);color:var(--red);border:1px solid var(--red-b)}
.sf-wrap .b-warn  {background:var(--amber-l);color:var(--amber);border:1px solid var(--amber-b)}
.sf-wrap .b-notice{background:var(--blue-l);color:var(--blue);border:1px solid var(--blue-b)}
.sf-wrap .b-gray  {background:var(--bg);color:var(--muted);border:1px solid var(--border)}
.sf-wrap .b-purple{background:var(--purple-l);color:var(--purple);border:1px solid var(--purple-b)}


.sf-wrap .drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100}
.sf-wrap .drawer-overlay.show{display:block}
.sf-wrap .drawer{position:fixed;right:0;top:0;bottom:0;width:520px;max-width:96vw;background:var(--white);border-left:1px solid var(--border);box-shadow:-4px 0 24px rgba(0,0,0,.1);z-index:99999;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease}
.sf-wrap .drawer.show{transform:translateX(0)}
.sf-wrap .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--white);z-index:1}
.sf-wrap .drawer-head h3{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:.5rem;color:var(--blue)}
.sf-wrap .close-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--border2);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--muted);flex-shrink:0}
.sf-wrap .close-btn:hover{background:var(--bg)}
.sf-wrap .drawer-body{padding:1.25rem}
.sf-wrap .d-section{margin-bottom:1.25rem}
.sf-wrap .d-section h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.sf-wrap .d-row{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid var(--bg);font-size:12px}
.sf-wrap .d-row:last-child{border-bottom:none}
.sf-wrap .d-key{color:var(--muted);min-width:120px;flex-shrink:0;font-weight:500}
.sf-wrap .d-val{color:var(--text);word-break:break-word;flex:1}
.sf-wrap .d-val.good{color:var(--green)}.d-val.bad{color:var(--red)}.d-val.warn{color:var(--amber)}
.sf-wrap .issue-list{display:flex;flex-direction:column;gap:4px}
.sf-wrap .issue-item{display:flex;align-items:flex-start;gap:8px;padding:6px 9px;border-radius:6px;font-size:12px}
.sf-wrap .issue-item.error  {background:var(--red-l);color:var(--red)}
.sf-wrap .issue-item.warning{background:var(--amber-l);color:var(--amber)}
.sf-wrap .issue-item.notice {background:var(--blue-l);color:var(--blue)}


.sf-wrap .pagination{display:flex;gap:4px;justify-content:center;padding:1rem;border-top:1px solid var(--border);flex-wrap:wrap}
.sf-wrap .ppage{min-width:30px;height:30px;border-radius:6px;border:1px solid var(--border2);background:var(--white);cursor:pointer;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;padding:0 6px;transition:all .15s}
.sf-wrap .ppage:hover{border-color:var(--blue);color:var(--blue)}
.sf-wrap .ppage.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.sf-wrap .ppage:disabled{opacity:.4;cursor:not-allowed}


.sf-wrap .tbl-search{border:1px solid var(--border2);border-radius:6px;padding:6px 10px;font-size:12px;font-family:var(--font);color:var(--text);outline:none;width:200px;transition:border .2s}
.sf-wrap .tbl-search:focus{border-color:var(--blue)}

.sf-wrap .empty-state{text-align:center;padding:3rem 1rem;color:var(--muted)}
.sf-wrap .empty-state .e-icon{font-size:36px;margin-bottom:.75rem}
.sf-wrap .empty-state .e-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:.35rem}
.sf-wrap .empty-state .e-sub{font-size:13px}


.sf-wrap .crawl-log{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.75rem 1rem;font-size:11px;font-family:monospace;max-height:140px;overflow-y:auto;margin-top:.75rem;color:var(--muted)}
.sf-wrap .crawl-log .log-ok{color:var(--green)}
.sf-wrap .crawl-log .log-err{color:var(--red)}
.sf-wrap .crawl-log .log-info{color:var(--blue)}

.sf-wrap .confirm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center}
.sf-wrap .confirm-overlay.show{display:flex}
.sf-wrap .confirm-box{background:var(--white);border-radius:var(--radius-lg);padding:1.5rem;width:360px;max-width:94vw;box-shadow:var(--shadow-md);text-align:center}
.sf-wrap .confirm-box h3{font-size:16px;font-weight:700;margin-bottom:.5rem}
.sf-wrap .confirm-box p{font-size:13px;color:var(--muted);margin-bottom:1.25rem}
.sf-wrap .confirm-actions{display:flex;gap:8px;justify-content:center}

.gmb-version{
    margin-bottom:25px;
    padding-bottom:15px;
    border-bottom:1px solid #e5e7eb;
}

.gmb-version h3{
    font-size:18px;
    font-weight:700;
    margin-bottom:12px;
    color:#4f46e5;
}

.gmb-check{
    margin:6px 0;
    color:#16a34a;
    font-weight:600;
}

.gmb-bullet{
    margin:6px 0;
    color:#374151;
}

.gmb-cta{
    margin-top:12px;
    color:#2563eb;
    font-weight:700;
}
.ai-version-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:15px;
    margin-bottom:15px;
}

.ai-version-title{
    font-weight:700;
    font-size:14px;
    color:#111827;
    margin-bottom:10px;
}

.ai-version-content{
    font-size:13px;
    line-height:1.7;
    color:#374151;
    white-space:pre-wrap;
    max-height:250px;
    overflow:auto;
    margin-bottom:12px;
}
.gbp-preview-body{
    white-space:pre-wrap;
}

.ai-use-btn{
    background:#16a34a;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:8px 14px;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
}
.bg-brand{background:#4361ee !important; }
.googleicon{ float:left; padding:0px 5px;}
.googleicon svg{ width:30px; height:30px;}


/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.ph-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  color: var(--blue);
}
.ph-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
}
.ph-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.ph-right {
  display: flex;
  gap: 8px;
}

/* Core Buttons & Inputs */
.btn {
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--white);
  color: var(--tx);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn .btn-icon {
  width: 14px;
  height: 14px;
}
.btn:hover {
  background: var(--bg);
  border-color: var(--muted);
}
.btn-blue {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.btn-blue:hover {
  background: #4338ca;
  border-color: #4338ca;
}
.btn-red {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
.btn-ghost:hover {
  background: var(--blue-l);
  color: var(--blue);
}
.btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}

/* Panels */
.form-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 6px;
}
.url-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.url-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-l);
}
.form-row {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}
.form-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}
#scrollToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border: none;
  outline: none;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

#scrollToTopBtn svg {
  width: 22px;
  height: 22px;
}

#scrollToTopBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

#scrollToTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


 
.current-plan-pill {
  background: rgba(255,255,255,.16);
  padding: 10px 20px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
}
 
/* ---------- Pricing Section ---------- */
.pricing-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 20px 20px;
}
 
.pricing-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}
 
.pricing-eyebrow {
  font-size: 11px;
  letter-spacing: .06em;
  margin-bottom: 18px;
  padding: 6px 14px;
}
 
.pricing-title {
  font-size: 34px;
  font-weight: 800;
  color: var(--sf-text);
  line-height: 1.2;
  margin: 0 0 10px;
}
 
.pricing-accent {
  color: var(--sf-purple);
}
 
.pricing-sub {
  font-size: 15px;
  color: var(--sf-muted);
  line-height: 1.6;
}
 

 
/* ---------- Grid ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
 
/* ---------- Card base ---------- */
.pricing-card {
  position: relative;
  background: var(--sf-white);
  border: 1px solid var(--sf-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
 
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
 
.pricing-card-top {
  margin-bottom: 24px;
}
 
.plan-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--sf-text);
  margin: 0 0 4px;
}
 
.plan-tagline {
  font-size: 13px;
  color: var(--sf-muted);
  margin: 0 0 18px;
}
 
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
  margin-bottom: 6px;
}
 
.plan-currency {
  font-size: 22px;
  font-weight: 700;
  color: var(--sf-text);
  align-self: flex-start;
  margin-top: 6px;
}
 
.plan-amount {
  font-size: 46px;
  font-weight: 800;
  color: var(--sf-text);
  letter-spacing: -1px;
}
 
.plan-period {
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-muted);
  margin-left: 4px;
}
 
.plan-billed {
  font-size: 12px;
  color: var(--sf-faint);
  margin: 0;
}
 
/* ---------- Buttons ---------- */
.pricing-card form {
  margin: 0 0 26px;
}
 
.pricing-card .btn {
  width: 100%;
  padding: 12px 18px;
  font-size: 14px;
  border-radius: var(--radius);
  text-decoration: none;
}
 
.btn-plan-outline {
  background: var(--sf-white);
  color: var(--sf-text);
  border: 1px solid var(--sf-border2);
}
 
.btn-plan-outline:hover {
  border-color: var(--sf-purple);
  color: var(--sf-purple);
}
 
.btn-plan-solid {
  background: linear-gradient(135deg, var(--sf-blue), var(--sf-purple));
  color: #fff;
  border: none;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .25);
}
 
.btn-plan-solid:hover {
  box-shadow: 0 10px 26px rgba(124, 58, 237, .35);
  transform: translateY(-1px);
}
 
.btn-plan-outline-dark {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}
 
.btn-plan-outline-dark:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.4);
}
 
/* ---------- Feature list ---------- */
.plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13.5px;
  color: var(--sf-text);
}
 
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
 
.pf-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
 
.pf-yes {
  background: var(--sf-green-l);
  color: var(--sf-green);
}
 
.pf-no {
  background: var(--sf-bg);
  color: var(--sf-faint);
}
 
.pf-disabled {
  color: var(--sf-faint);
}
 
/* ==========================================================
   UPGRADE PAGE — Current Plan Banner + Pricing Cards (v2)
   Each card: white top (plan info + features) + tinted
   price/CTA zone, matching reference screenshot style.
   Uses existing :root tokens from style.css.
   Paste this block into style.css
   ========================================================== */

/* ---------- Current Plan Banner ---------- */
.current-plan-banner {
  background: linear-gradient(135deg, var(--sf-blue), var(--sf-purple));
  border-radius: 24px;
  padding: 32px;
  color: #fff;
  margin-bottom: 40px;
  box-shadow: 0 16px 40px rgba(124, 58, 237, .18);
}

.current-plan-label {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin: 0 0 12px;
}

.current-plan-name {
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 20px;
  line-height: 1.1;
}

.current-plan-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.current-plan-pill {
  background: rgba(255,255,255,.16);
  padding: 10px 20px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Pricing Section Head ---------- */
.pricing-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 20px 20px;
}

.pricing-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

.pricing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--sf-purple);
  background: var(--sf-purple-l);
  border: 1px solid var(--sf-purple-b);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.pricing-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--sf-text);
  line-height: 1.2;
  margin: 0 0 12px;
}

.pricing-accent { color: var(--sf-purple); }

.pricing-sub {
  font-size: 16px;
  color: var(--sf-muted);
  line-height: 1.6;
}

/* ---------- Grid ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* ---------- Card shell ---------- */
.pricing-card {
  position: relative;
  background: var(--sf-white);
  border: 1px solid var(--sf-border);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .1);
}

/* Top zone: plan name, tagline, feature list */
.pricing-card-info {
  padding: 32px 28px 28px;
  flex: 1;
}

.plan-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--sf-text);
  margin: 0 0 4px;
}

.plan-tagline {
  font-size: 13px;
  color: var(--sf-muted);
  margin: 0 0 22px;
}

.plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 13.5px;
  color: var(--sf-text);
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pf-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.pf-yes { background: var(--sf-green-l); color: var(--sf-green); }
.pf-no  { background: var(--sf-bg); color: var(--sf-faint); }
.pf-disabled { color: var(--sf-faint); }

/* Bottom zone: tinted price + CTA panel, like reference image */
.pricing-card-price {
  background: var(--sf-purple-l);
  border-top: 1px solid var(--sf-purple-b);
  padding: 26px 28px 30px;
  text-align: center;
}

.plan-price-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sf-muted);
  margin: 0 0 8px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  margin-bottom: 4px;
}

.plan-currency {
  font-size: 20px;
  font-weight: 700;
  color: var(--sf-text);
  align-self: flex-start;
  margin-top: 8px;
}

.plan-amount {
  font-size: 42px;
  font-weight: 800;
  color: var(--sf-text);
  letter-spacing: -1px;
}

.plan-period {
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-muted);
  margin-left: 2px;
}

.plan-billed {
  font-size: 12px;
  color: var(--sf-faint);
  margin: 0 0 18px;
}

.pricing-card form { margin: 0; }

.btn-plan-cta {
  display: block;
  width: 100%;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: var(--sf-purple);
  color: #fff;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn-plan-cta:hover {
  background: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(124, 58, 237, .36);
}

.current-plan-banner {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-radius: 24px;
  padding: 32px;
  color: #ffffff;
  margin-bottom: 40px;
  box-shadow: 0 16px 40px rgba(124, 58, 237, .18);
}

.current-plan-label {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin: 0 0 12px;
}

.current-plan-name {
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 20px;
  line-height: 1.1;
  color: #ffffff;
}

.current-plan-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.current-plan-pill {
  background: rgba(255,255,255,.16);
  padding: 10px 20px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

/* ---------- Pricing Section Head ---------- */
.pricing-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 20px 20px;
}

.pricing-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

.pricing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #7c3aed;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.pricing-title {
  font-size: 36px;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
  margin: 0 0 12px;
}

.pricing-accent { color: #7c3aed; }

.pricing-sub {
  font-size: 16px;
  color: #6b7280;
  line-height: 1.6;
}

/* ---------- Grid ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* ---------- Card shell (default = Starter style) ---------- */
.pricing-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .12);
}

/* Top zone: plan name, tagline, feature list */
.pricing-card-info {
  padding: 32px 28px 28px;
  flex: 1;
}

.plan-name {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 4px;
}

.plan-tagline {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 22px;
}

.plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 13.5px;
  color: #111827;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pf-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.pf-yes { background: #dcfce7; color: #16a34a; }
.pf-no  { background: #f3f4f6; color: #9ca3af; }
.pf-disabled { color: #9ca3af; }

/* ---------- Price + CTA zone (Starter = light gray-purple tint) ---------- */
.pricing-card-price {
  background: #f9f7ff;
  border-top: 1px solid #ece6fc;
  padding: 26px 28px 30px;
  text-align: center;
}

.plan-price-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b5b95;
  margin: 0 0 8px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  margin-bottom: 4px;
}

.plan-currency {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  align-self: flex-start;
  margin-top: 8px;
}

.plan-amount {
  font-size: 42px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -1px;
}

.plan-period {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  margin-left: 2px;
}

.plan-billed {
  font-size: 12px;
  color: #9ca3af;
  margin: 0 0 18px;
}

.pricing-card form { margin: 0; }

.btn-plan-cta {
  display: block;
  width: 100%;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: #7c3aed;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .3);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn-plan-cta:hover {
  background: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(124, 58, 237, .4);
}

/* ---------- Popular (Professional) — solid purple price zone ---------- */
.pricing-card-popular {
  border: 2px solid #7c3aed;
  box-shadow: 0 18px 40px rgba(124, 58, 237, .2);
  transform: scale(1.03);
  z-index: 2;
}

.pricing-card-popular:hover {
  transform: scale(1.03) translateY(-4px);
}

.pricing-card-popular .pricing-card-price {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-top: none;
}

.pricing-card-popular .plan-price-label {
  color: rgba(255,255,255,.88);
}

.pricing-card-popular .plan-billed {
  color: rgba(255,255,255,.65);
}

.pricing-card-popular .plan-currency,
.pricing-card-popular .plan-amount {
  color: #ffffff;
}

.pricing-card-popular .plan-period {
  color: rgba(255,255,255,.75);
}

.pricing-card-popular .btn-plan-cta {
  background: #ffffff;
  color: #7c3aed;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.pricing-card-popular .btn-plan-cta:hover {
  background: #f5f3ff;
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
}

.popular-ribbon {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #fbbf24;
  color: #78350f;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 999px;
  z-index: 3;
}

/* ---------- Enterprise (dark) card ---------- */
.pricing-card-dark {
  background: #0f172a;
  border: 1px solid #0f172a;
}

.pricing-card-dark .plan-name {
  color: #ffffff;
}

.pricing-card-dark .plan-features {
  color: #e5e7eb;
}

.pricing-card-dark .plan-tagline {
  color: rgba(255,255,255,.55);
}

.pricing-card-dark .pf-yes {
  background: rgba(34,197,94,.2);
  color: #4ade80;
}

.pricing-card-dark .pricing-card-price {
  background: #1e293b;
  border-top: 1px solid rgba(255,255,255,.08);
}

.pricing-card-dark .plan-price-label {
  color: rgba(255,255,255,.5);
}

.pricing-card-dark .plan-billed {
  color: rgba(255,255,255,.4);
}

.pricing-card-dark .plan-currency,
.pricing-card-dark .plan-amount {
  color: #ffffff;
}

.pricing-card-dark .plan-period {
  color: rgba(255,255,255,.6);
}

.pricing-card-dark .btn-plan-cta {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.pricing-card-dark .btn-plan-cta:hover {
  background: #f1f5f9;
}

/* ---------- Footer trust row ---------- */
.pricing-foot {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.pricing-foot-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: .02em;
}

.pf-shield { color: #16a34a; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-card-popular {
    grid-column: span 2;
    transform: none;
  }
  .pricing-card-popular:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 768px) {
  .pricing-title { font-size: 28px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card-popular { grid-column: span 1; }
  .current-plan-name { font-size: 32px; }
}

@media (max-width: 480px) {
  .pricing-wrap { padding: 32px 14px 14px; }
  .pricing-card-info { padding: 26px 22px 22px; }
  .pricing-card-price { padding: 22px 22px 26px; }
  .plan-amount { font-size: 36px; }
  .popular-ribbon { font-size: 9.5px; padding: 4px 10px; top: 14px; right: 14px; }
  .pricing-foot { gap: 16px; flex-direction: column; align-items: center; }
  .current-plan-banner { padding: 24px; }
  .current-plan-name { font-size: 28px; }
}

/* ===== REPORT HEAD RIGHT (v2) ===== */
.report-head-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    text-align:right;
    gap:16px;
    max-width:520px;
    margin-left:auto;
}
.report-domain-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(135deg,#eff6ff,#f5f3ff);
    border:1px solid #dbeafe;
    color:#2563eb;
    font-size:13px;
    font-weight:700;
    padding:8px 16px;
    border-radius:999px;
    letter-spacing:.2px;
    text-decoration:none;
}
.report-domain-pill .dot{
    width:6px;height:6px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 3px rgba(34,197,94,.15);
    flex-shrink:0;
}
.report-project-title{
    font-size:25px;
    font-weight:600;
    line-height:1.05;
    letter-spacing:0px;
    background:linear-gradient(135deg,#0f172a,#1e3a8a);
    -webkit-background-clip:text;
    background-clip:text;
   
}
.report-meta-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
    width:100%;
}
.report-meta-chip{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid #e8edf5;
    border-radius:14px;
    padding:11px 16px;
    font-size:13px;
    color:#64748b;
    white-space:nowrap;
    box-shadow:0 2px 8px rgba(15,23,42,.03);
}
.report-meta-chip .icon{
    width:26px;height:26px;
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;
    flex-shrink:0;
    color:#fff;
}
.report-meta-chip.period .icon{background:linear-gradient(135deg,#2563eb,#4f46e5);}
.report-meta-chip.created .icon{background:linear-gradient(135deg,#7c3aed,#a855f7);}
.report-meta-chip .label{color:#94a3b8;font-weight:600;}
.report-meta-chip b{color:#0f172a;font-weight:700;margin-left:2px;}

@media(max-width:768px){
    .report-head-right{align-items:flex-start;text-align:left;margin-left:0;}
    .report-meta-row{justify-content:flex-start;}
    .report-project-title{font-size:30px;}
}


/*----- GMB Post---*/
.gbp-wrap {
    display: grid;
    grid-template-columns: minmax(0, 800px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}
.gbp-composer {
    background: #fff;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    padding: 28px;
    position: sticky;
    top: 100px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    box-sizing: border-box;
}
.gbp-composer h3 {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gbp-field {
    margin-bottom: 18px;
}
.gbp-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.gbp-input, .gbp-select, .gbp-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    color: #0f172a;
    background: #f8fafc;
    outline: none;
    transition: all .2s;
    font-family: inherit;
    box-sizing: border-box;
}
.gbp-input:focus, .gbp-select:focus, .gbp-textarea:focus {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.08);
}
.gbp-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}
.gbp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.gbp-type-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.gbp-type-tab {
    padding: 7px 14px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all .2s;
}
.gbp-type-tab.active, .gbp-type-tab:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: #f5f3ff;
}
.gbp-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.gbp-btn {
    padding: 10px 20px;
    border-radius: 12px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
}
.gbp-btn-draft { background: #f1f5f9; color: #334155; }
.gbp-btn-draft:hover { background: #e2e8f0; }
.gbp-btn-schedule { background: #6366f1; color: #fff; }
.gbp-btn-schedule:hover { background: #4f46e5; }
.gbp-btn-publish { background: #16a34a; color: #fff; }
.gbp-btn-publish:hover { background: #15803d; }

.gbp-btn-ai {
    background: #f0fdf4;
    color: #16a34a;
    border: 1.5px solid #bbf7d0;
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 14px;
    transition: all .2s;
}
.gbp-btn-ai:hover { background: #dcfce7; }
.gbp-btn-ai:disabled { opacity: .6; cursor: not-allowed; }

.gbp-preview {
    background: #f8fafc;
    border: 1.5px solid #e0e7ff;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
    display: none;
}
.gbp-preview.show { display: block; }
.gbp-preview-label {
    font-size: 10px;
    font-weight: 800;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.gbp-preview-body {
    font-size: 13px;
    color: #334155;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.gbp-posts-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}
.gbp-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.gbp-status-tabs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.gbp-stab {
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}
.gbp-stab.active {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}
.gbp-post-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: all .2s;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-sizing: border-box;
}
.gbp-post-card:hover {
    border-color: #c7cdf8;
    box-shadow: 0 4px 20px rgba(99,102,241,0.04);
}
.gbp-post-left {
    flex: 1;
    min-width: 0;
}
.gbp-post-top-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}
.gbp-post-body {
    font-size: 13.5px;
    color: #334155;
    line-height: 1.55;
    margin: 0 0 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.gbp-post-dates {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.gbp-date-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 10px;
    white-space: nowrap;
}
.gbp-date-chip i { font-size: 13px; }
.gbp-date-chip.sched { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.gbp-date-chip.pub { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.gbp-date-chip.fail { background: #fef2f2; border-color: #fecaca; color: #b42318; }

.gbp-post-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: flex-start;
}
.gbp-act-btn {
    padding: 6px 13px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #334155;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.gbp-act-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.gbp-act-edit { border-color: #c7cdf8; color: #6366f1; background: #f5f3ff; }
.gbp-act-edit:hover { background: #e0e4fb; }
.gbp-act-publish { border-color: #a7f3d0; color: #16a34a; background: #f0fdf4; }
.gbp-act-publish:hover { background: #dcfce7; }
.gbp-act-delete { border-color: #fecaca; color: #dc2626; background: #fef2f2; }
.gbp-act-delete:hover { background: #fee2e2; }

.gbp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}
/* Type badges */
.badge-standard { background: #f5f3ff; color: #6366f1; border-color: #c7cdf8; }
.badge-event { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.badge-offer { background: #fdf4ff; color: #9333ea; border-color: #e9d5ff; }
.badge-product { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
/* Status badges */
.badge-draft { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.badge-scheduled { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge-published { background: #ecfdf5; color: #16a34a; border-color: #a7f3d0; }
.badge-failed { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

.gbp-empty { text-align: center; padding: 48px 20px; color: #94a3b8; }
.gbp-empty-icon { font-size: 40px; margin-bottom: 10px; }

.gbp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 0;
    border-top: 1px solid #e2e8f0;
    margin-top: 4px;
    flex-wrap: wrap;
    gap: 10px;
}
.gbp-page-info { font-size: 12.5px; color: #64748b; font-weight: 600; }
.gbp-page-btns { display: flex; gap: 4px; }
.gbp-ppage {
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    text-decoration: none;
    color: #334155;
    transition: .15s;
}
.gbp-ppage:hover { border-color: #6366f1; color: #6366f1; }
.gbp-ppage.active { background: #6366f1; color: #fff; border-color: #6366f1; }

.char-counter { font-size: 11px; color: #94a3b8; text-align: right; margin-top: 4px; }
.char-counter.warn { color: #d97706; }
.char-counter.over { color: #dc2626; }
.conditional-field { display: none; }
.conditional-field.show { display: block; }
.ai-loader { display: none; text-align: center; padding: 10px; font-size: 13px; color: #6366f1; font-weight: 600; }
.gmb-alert { padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.gmb-alert-warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

.gbp-date-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    flex-wrap: wrap;
    box-sizing: border-box;
}

/* ==========================================
   RESPONSIVE LAYOUT UPDATES
   ========================================== */

/* Medium Screens (e.g. Tablets & Small Laptops) */
@media (max-width: 1150px) {
    .gbp-wrap {
        grid-template-columns: 1fr; /* Stack the Composer and Feed vertically */
        gap: 20px;
    }
    .gbp-composer {
        position: static; /* Release sticky position to fit stacked flow naturally */
        top: auto;
    }
}

/* Small Screens (e.g. Mobile Phones) */
@media (max-width: 640px) {
    .gbp-composer {
        padding: 16px;
        border-radius: 16px;
    }
    .gbp-row {
        grid-template-columns: 1fr; /* Form row inputs stack vertically */
        gap: 8px;
    }
    .gbp-post-card {
        flex-direction: column; /* Stack post details and action buttons */
        gap: 12px;
        padding: 14px;
    }
    .gbp-post-actions {
        width: 100%;
        justify-content: flex-end; /* Align post card buttons to the right */
        border-top: 1px solid #f1f5f9;
        padding-top: 10px;
    }
    .gbp-date-filter {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .gbp-date-filter > div {
        width: 100%;
        justify-content: space-between;
    }
    /* Force inline date filters to be fluid */
    .gbp-date-filter input[type="date"] {
        width: 100% !important;
        max-width: none;
    }
    
    /* Responsive overrides for AI card inline grids */
    .ai-version-card > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    #bulkScheduleSettings {
        grid-template-columns: 1fr !important;
    }
}
.project-tabs-wrapper-mobile {
    position: relative;
}
.mobile-menu-btn {
    display: none !important; /* Hidden on desktop */
}
@media(max-width:900px){.gbp-wrap{grid-template-columns:1fr}.gbp-composer{position:static}}

@media only screen and (max-width: 1024px){
.modern-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr)) } 
.google-panel{padding:20px; }    
 /* Align all three major elements on one line */
    .project-topbar-modern {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        overflow:visible;
    }

.project-tabs-modern a i{margin-right:10px; margin-top:4px; }
    /* Left Element: Truncate title cleanly */
    .project-info-modern {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .project-title-modern {
        font-size: 15px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 80px !important; /* Keeps name in check */
    }

    /* Center Element: Toggle Menu Button */
    .project-tabs-wrapper-mobile {
        flex-shrink: 0 !important;
        z-index: 100 !important;
    }
    .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 8px 12px !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        cursor: pointer;
        outline: none;
        white-space: nowrap;
    }

    /* Convert standard links container into a floating dropdown list */
    .project-tabs-modern {
        display: none !important; /* Hidden until menu toggled open */
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 180px !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 4px 0 !important;
        margin: 0 !important;
    }

    /* Show dropdown options when active */
    .project-tabs-wrapper-mobile.is-open .project-tabs-modern {
        display: flex !important;
    }

    /* Dropdown links formatting */
    .project-tabs-modern a {
        display: flex !important;
        width: 100% !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #475569 !important;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: transparent !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
    }
    .project-tabs-modern a:last-child {
        border-bottom: none !important;
    }
    .project-tabs-modern a.active-tab-modern {
        background: #f8fafc !important;
        color: #6366f1 !important;
    }

    /* Right Element: Compact Actions */
    .project-topbar-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    .project-topbar-actions .back-btn-modern {
        padding: 8px 10px !important;
        font-size: 12.5px !important;
    }
    /* Hide descriptive button text on mobile to force icon-only format */
    .project-topbar-actions .back-btn-modern .btn-text {
        display: none !important;
    }
}

.keyword-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.keyword-card {
    padding: 14px;
    border-radius: 12px;
    text-align: center;
}

.keyword-label {
    font-size: 12px;
    margin-bottom: 6px;
}

.keyword-value {
    font-size: 24px;
    font-weight: 700;
}

/* Card Colors */
.card-improved {
    background: #dcfce7;
}

.card-dropped {
    background: #fee2e2;
}

.card-stable {
    background: #e0f2fe;
}

.card-new {
    background: #fef3c7;
}

.card-lost {
    background: #f3f4f6;
}

.card-top10 {
    background: #ede9fe;
}

.card-top10 .keyword-value {
    color: #7c3aed;
}    
.text-center{text-align:center!important; }

/* Base Container & Desktop Layout */
  .audit-header-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
  }
  .audit-rings-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
  }
  .audit-ring-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .audit-header-divider {
    width: 1px;
    height: 80px;
    background: #e5e7eb;
    flex-shrink: 0;
  }
  .audit-header-meta {
    flex: 1;
    min-width: 180px;
  }
  .audit-pills-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .report-logo {
    width: 200px;
    height: auto;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Responsive Mobile Layout (< 768px) */
  @media (max-width: 768px) {
    .audit-header-container {
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      gap: 1.25rem !important;
    }
    
    /* Place Logo at the absolute top */
    .report-logo {
      order: -2 !important;
      margin: 0 auto 0.25rem auto !important;
      position:static;
      transform:none;
    }
#sitemapUrl{ width:100%; display:block !important; }
    /* Group and center score rings on a single row */
    .audit-rings-group {
      order: -1 !important;
      justify-content: center !important;
      width: 100% !important;
      gap: 1rem !important;
    }

    /* Hide vertical dividers on mobile stack */
    .audit-header-divider {
      display: none !important;
    }

    /* Center text metadata */
    .audit-header-meta {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }

    /* Center issue pills */
    .audit-pills-row {
      justify-content: center !important;
    }
  }
    /* Base Desktop Styles */
  .sitemap-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: nowrap;
  }
  .sitemap-url-input {
    flex: 1;
    min-width: 0; /* Prevents overflow in flex rows */
  }
  /* Modern Green Button Override */
  .btn-sitemap-green {
    background-color: #22c55e !important; /* Green */
    border-color: #16a34a !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-sitemap-green:hover {
    background-color: #16a34a !important;
    border-color: #15803d !important;
  }

  /* Responsive Mobile Layout (< 768px) */
  @media (max-width: 768px) {
    .sitemap-form-row {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 12px !important;
    }
    .sitemap-url-input {
      width: 100% !important;
      box-sizing: border-box !important;
    }
    .sitemap-form-actions {
      width: 100% !important;
    }
    #sitemapFetchBtn {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      height: 42px !important;
      box-sizing: border-box !important;
    }
  }


@media only screen and (max-width: 1024px){
.modern-kpi-grid{margin-top:10px;grid-template-columns:repeat(1,minmax(0,1fr)) } 
.modern-kpi-grids{margin-top:10px;grid-template-columns:repeat(1,minmax(0,1fr)) }
.compare-grid{margin-top:10px; grid-template-columns:repeat(2,minmax(180px,1fr)) }   
.overview-grid{margin-top:10px; gap:0px; grid-template-columns:repeat(1,minmax(0,1fr))  }
.report-header{margin-bottom:0px; }
}

@media only screen and (max-width: 680px){
   .report-head-left{ width:100%;}   
   .keyword-summary-grid{ grid-template-columns:repeat(3, 1fr)}
   .sf-wrap .page-header{display:block; }
   #scansRemainingLabel{display:block !important; margin:5px 0px !important; }
   .sf-wrap .ph-icon{ display:none;}
}