/* ===============================
   AUDIT SECTION
================================ */

.audit-section{
position:relative;
padding:90px 0;

background:
linear-gradient(
180deg,
#f8fafc 0%,
#f2f6fb 100%
);

overflow:hidden;
}

/* background grid */

.audit-section::before{
content:"";
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(42,71,104,.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(42,71,104,.10) 1px, transparent 1px);

background-size:70px 70px;

opacity:.40;
pointer-events:none;

z-index:0;
}




/* ===============================
   AUDIT WIDGET
================================ */

.audit-widget{
position:relative;

display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
max-width:1100px;
margin:auto;
padding:60px;
border-radius:22px;
background:linear-gradient(180deg,#d6e3f1 0%, #e2ecf7 100%);
border:1px solid rgba(42,71,104,.16);
box-shadow:
0 24px 50px rgba(20,33,48,.10),
0 8px 18px rgba(20,33,48,.05);
}

/* corner decorations */

.audit-widget::before,
.audit-widget::after{
content:"";
position:absolute;
width:80px;
height:80px;
border:2px solid rgba(42,71,104,.15);
pointer-events:none;
}

.audit-widget::before{
top:-12px;
left:-12px;
border-right:none;
border-bottom:none;
}

.audit-widget::after{
bottom:-12px;
right:-12px;
border-left:none;
border-top:none;
}

.audit-widget h2{
margin-bottom:10px;
}

.audit-sub{
line-height:1.5;
margin-bottom:26px;
color:#5c6b7a;
}


/* ===============================
   LEFT COLUMN (FORM)
================================ */

.audit-box{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px 30px;
margin-top:25px;
}

.audit-box label{
font-weight:600;
display:block;
}

.audit-box select,
.audit-box input{
width:100%;
padding:11px;

border-radius:10px;
border:1px solid #d7e0ea;

background:#fff;

transition:all .2s ease;
}



/* full width inputs */

.audit-box .full-width{
grid-column:1 / -1;
}

.audit-box button{
grid-column:1 / -1;
width:100%;
}


/* ===============================
   PROGRESS BAR
================================ */

.audit-progress{
height:18px;
background:#e6ecf3;
border-radius:6px;
margin-bottom:25px;
overflow:hidden;
}

.audit-bar{
height:100%;
width:0%;

background:linear-gradient(90deg,#5a8db8,#2a4768);

transition:.35s;
}


/* ===============================
   URL INPUT
================================ */

.audit-url-box{
margin-bottom:25px;
}

.audit-url-box label{
font-weight:600;
display:block;
margin-bottom:8px;
}

.url-input-wrap{
display:flex;
gap:10px;
align-items:center;
}

.url-input-wrap input{
flex:1;

padding:12px;

border-radius:8px;
border:1px solid #d7e0ea;

background:#fff;
}

.audit-status{
margin-top:12px;
font-size:.95rem;
color:var(--accent);
min-height:20px;
}


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

.audit-side{
display:flex;
flex-direction:column;
justify-content:space-between;

gap:28px;

padding:30px 15px;

border-left:1px solid #e3e9f1;

background:rgba(255,255,255,.18);
border:1px solid rgba(42,71,104,.08);
border-radius:20px;
}

.audit-side-top h3{

margin-bottom:66px;
}

.audit-side-top p{

margin-bottom:16px;
}

.audit-side-title{
display:inline-block;

font-size:1.2rem;
font-weight:700;
letter-spacing:.02em;

padding:18px 25px;

border-radius:8px;

background:#eef4fb;
color:#2a4768;

margin-top:26px;
margin-bottom:6px;
}

.audit-points{
display:grid;
gap:10px;
margin-top:10px;
}

.audit-points li{
list-style:none;

padding-left:18px;
position:relative;

color:#344455;
}

.audit-points li::before{
content:"✓";

position:absolute;
left:0;

font-size:.98rem;
color:#4f7da8;

font-weight:700;
}


/* ===============================
   AUDIT RESULT BOX
================================ */

.audit-side-result{

margin-top:12px;
padding:30px;

border-radius:16px;

background:linear-gradient(
180deg,
#f8fbff,
#eef4fb
);

border:1px solid #e3e9f1;

min-height:170px;

box-shadow:
inset 0 1px 0 rgba(255,255,255,.6);
}


/* small label */

.audit-result-label{
font-size:17px;
letter-spacing:.08em;
font-weight:700;

color:#2a4768;

margin-bottom:10px;
}


/* heading */

.audit-title{
font-size:1.5rem;
font-weight:700;

color:#16202a;

margin-bottom:8px;
}

.audit-title span{
color:var(--accent);
}


/* score number */

.audit-score-number{
font-size:42px;
font-weight:700;
}

.audit-score-max{
font-size:.6em;
opacity:.6;
margin-left:4px;
}

.score-good{
color:#27ae60;
}

.score-medium{
color:#f39c12;
}

.score-bad{
color:#e74c3c;
}

/* /100 part */

.audit-score-number span{
font-size:.85em;
color:#105294;
opacity:.95;
margin-left:4px;
}


/* explanation text */

.audit-result-text{
font-size:.78rem;
color:#105294;
line-height:1.5;
}

.result-item{
  margin-bottom: 10px;
  line-height: 1.6;
}




/* ===============================
   TEMPLATE SEARCH LIBRARY
================================ */

.template-library-wrap{
  position: relative;
  margin-top: 32px;
  padding: 30px;
  border: 1px solid #dbe4ee;
  border-radius: 24px;
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(42,71,104,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,71,104,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  box-shadow: 0 18px 44px rgba(20,33,48,0.06);
  overflow: hidden;
}

.template-search-bar{
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border: 1px solid #dfe7f0;
  border-radius: 18px;
  background: #ffffff;
}

.template-search-main label,
.template-search-filters label{
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #24364b;
}

.template-search-input-wrap{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.template-search-input-wrap input{
  flex: 1 1 420px;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #d7e1ec;
  background: #ffffff;
  color: #16202a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.template-search-input-wrap input:focus,
.template-search-filters select:focus{
  outline: none;
  border-color: #9fb3c8;
  box-shadow: 0 0 0 4px rgba(42,71,104,0.08);
}

.template-search-filters{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.template-search-filters select{
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d7e1ec;
  background: #ffffff;
  color: #16202a;
}

.template-library-meta{
  margin-top: 18px;
}

.template-library-meta .info-strip{
  padding: 14px 18px;
  border: 1px solid #dfe7f0;
  border-radius: 14px;
  background: rgba(255,255,255,0.88);
  color: #314255;
}

.template-library-grid{
  display: grid;
  grid-template-columns: 0.95fr 1.25fr;
  gap: 32px;
  margin-top: 24px;
  align-items: start;
}

.template-library-results{
  display: grid;
  gap: 16px;
  max-height: 900px;
  overflow: auto;
  padding-right: 14px;
}

.template-library-results::-webkit-scrollbar,
.template-preview-text::-webkit-scrollbar{
  width: 10px;
}

.template-library-results::-webkit-scrollbar-thumb,
.template-preview-text::-webkit-scrollbar-thumb{
  background: rgba(42,71,104,0.18);
  border-radius: 999px;
}

.template-library-item{
  padding: 18px;
  border: 1px solid #dfe7f0;
  border-radius: 16px;
  background: rgba(255,255,255,0.9);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.template-library-item:hover{
  transform: translateY(-2px);
  border-color: #b8c8d8;
  box-shadow: 0 10px 24px rgba(20,33,48,0.06);
  background: #ffffff;
}

.template-library-item.active{
  border-color: #9fb3c8;
  background: linear-gradient(180deg, #ffffff, #f2f7fc);
  box-shadow: 0 12px 28px rgba(20,33,48,0.08);
}

.template-library-item .item-top{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.template-library-item h3{
  margin: 0;
  font-size: 1.05rem;
  color: #16202a;
}

.template-library-badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid #d8e2ec;
  background: #f6f9fc;
  color: #355273;
}

.template-library-item .item-meta{
  font-size: 0.92rem;
  color: #617285;
  margin-bottom: 10px;
}

.template-library-item p{
  margin: 0;
  color: #506172;
}

.template-library-preview{
  position: sticky;
  top: 20px;
  padding-left: 24px;
  border-left: 1px solid #d9e3ee;
}

.template-preview-box{
  padding: 24px;
  border: 1px solid #dfe7f0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(20,33,48,0.06);
}

.template-preview-box h3{
  margin-bottom: 8px;
}

.template-preview-meta{
  margin-top: 10px;
  color: #6b7c8d;
}

.template-preview-text{
  margin-top: 18px;
  min-height: 360px;
  max-height: 720px;
  overflow: auto;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid #dfe7f0;
  background: #fcfdff;
  white-space: pre-wrap;
  line-height: 1.7;
  color: #16202a;
}

.template-preview-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e3eaf2;
}

.template-empty{
  padding: 22px;
  border: 1px dashed #c8d4e0;
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
}

/* ===============================
   WEBSITE TEMPLATE LIBRARY
================================ */

.website-template-preview-media{
  margin-top: 18px;
  border: 1px solid #dfe7f0;
  border-radius: 16px;
  overflow: hidden;
  background: #f7fbff;
}

.website-template-preview-media img{
  display: block;
  width: 100%;
  height: auto;
}

.website-template-result{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: start;
}

.website-template-thumb{
  width: 96px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #dbe4ee;
  background: #f4f8fc;
}

.website-template-result .item-meta{
  font-size: 0.92rem;
  color: #617285;
  margin-bottom: 10px;
}

.website-template-result p{
  margin: 0;
  color: #506172;
  line-height: 1.55;
}

.template-load-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

@media (max-width: 768px){
  .website-template-result{
    grid-template-columns: 1fr;
  }

  .website-template-thumb{
    width: 100%;
    height: auto;
    max-height: 180px;
  }
}