.tool-page{
padding-bottom:80px
}
.tool-intro{
background:var(--bg-alt);
padding:24px 0
}
.tool-intro p{
color:var(--text-light);
max-width:800px;
font-size:1rem;
line-height:1.7
}
.tool-container{
margin-top:32px
}
.input-group{
margin-bottom:20px
}
.input-group label{
display:block;
font-weight:600;
color:var(--text);
margin-bottom:10px;
font-size:0.95rem
}
.input-field{
width:100%;
padding:14px 16px;
border:2px solid var(--border);
border-radius:var(--radius);
font-size:1rem;
transition:var(--transition);
background:var(--bg)
}
.input-field:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(16,185,129,0.1)
}
.char-count{
font-size:0.85rem;
color:var(--text-muted);
margin-top:8px;
text-align:right
}
.results-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:16px
}
.result-card{
background:var(--bg-alt);
border:1px solid var(--border-light);
border-radius:var(--radius-lg);
padding:24px;
text-align:center
}
.result-card .value{
font-size:2rem;
font-weight:700;
color:var(--primary);
margin-bottom:6px
}
.result-card .label{
font-size:0.8rem;
font-weight:500;
color:var(--text-light);
text-transform:uppercase;
letter-spacing:0.03em
}
.analysis-table{
width:100%;
border-collapse:collapse;
margin-top:20px;
border:1px solid var(--border);
border-radius:var(--radius);
overflow:hidden
}
.analysis-table th,
.analysis-table td{
padding:14px 18px;
text-align:left;
border-bottom:1px solid var(--border)
}
.analysis-table th{
background:var(--bg-alt);
font-weight:600;
color:var(--primary);
font-size:0.85rem;
text-transform:uppercase;
letter-spacing:0.03em
}
.analysis-table tr:last-child td{
border-bottom:none
}
.analysis-table tr:hover td{
background:var(--bg-alt)
}
.analysis-table td{
font-size:0.95rem;
color:var(--text)
}
.preview-box{
background:var(--bg-alt);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:28px;
margin-top:24px
}
.serp-preview{
background:#fff;
border-radius:var(--radius);
padding:24px;
max-width:600px;
font-family:Arial,sans-serif;
box-shadow:var(--shadow)
}
.serp-title{
color:#1a0dab;
font-size:20px;
line-height:1.3;
margin-bottom:6px;
cursor:pointer;
display:block;
text-decoration:none
}
.serp-title:hover{
text-decoration:underline
}
.serp-url{
color:#006621;
font-size:14px;
margin-bottom:6px
}
.serp-description{
color:#545454;
font-size:14px;
line-height:1.58
}
.og-preview{
background:#fff;
border:1px solid #dddfe2;
border-radius:8px;
max-width:500px;
overflow:hidden;
box-shadow:var(--shadow)
}
.og-image{
width:100%;
height:260px;
background:var(--bg-dark);
display:flex;
align-items:center;
justify-content:center;
color:var(--text-light)
}
.og-content{
padding:14px 16px
}
.og-site{
font-size:12px;
color:#606770;
text-transform:uppercase
}
.og-title-preview{
font-size:16px;
font-weight:600;
color:#1d2129;
margin:6px 0
}
.og-desc{
font-size:14px;
color:#606770;
line-height:1.5
}
.suggestions-list{
list-style:none;
margin-top:20px
}
.suggestions-list li{
padding:16px 20px;
background:var(--bg-alt);
border:1px solid var(--border-light);
border-radius:var(--radius);
margin-bottom:10px;
display:flex;
align-items:flex-start;
gap:14px
}
.suggestions-list li:last-child{
margin-bottom:0
}
.suggestion-icon{
flex-shrink:0;
width:28px;
height:28px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:0.85rem;
font-weight:600
}
.suggestion-icon.good{
background:#d1fae5;
color:#065f46
}
.suggestion-icon.warning{
background:#fef3c7;
color:#92400e
}
.suggestion-icon.error{
background:#fee2e2;
color:#991b1b
}
.heading-tree{
font-family:'SF Mono','Consolas',monospace;
font-size:0.9rem;
line-height:2
}
.heading-tree .h1{
color:var(--primary);
font-weight:700
}
.heading-tree .h2{
margin-left:24px;
color:#1e40af
}
.heading-tree .h3{
margin-left:48px;
color:#3b82f6
}
.heading-tree .h4{
margin-left:72px;
color:#60a5fa
}
.heading-tree .h5{
margin-left:96px;
color:#93c5fd
}
.heading-tree .h6{
margin-left:120px;
color:#bfdbfe
}
.empty-state{
text-align:center;
padding:48px 24px;
color:var(--text-light)
}
.empty-state p{
margin-bottom:20px;
font-size:1rem
}
.robots-form{
display:grid;
gap:24px
}
.robots-section{
background:var(--bg-alt);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:24px
}
.robots-section h4{
font-size:1rem;
font-weight:600;
color:var(--primary);
margin-bottom:18px
}
.checkbox-group{
display:flex;
flex-direction:column;
gap:12px
}
.checkbox-item{
display:flex;
align-items:center;
gap:12px
}
.checkbox-item input[type="checkbox"]{
width:20px;
height:20px;
cursor:pointer;
accent-color:var(--accent)
}
.checkbox-item label{
cursor:pointer;
font-size:0.95rem;
color:var(--text)
}
.output-area{
background:var(--primary);
color:#e2e8f0;
padding:24px;
border-radius:var(--radius-lg);
font-family:'SF Mono','Consolas',monospace;
font-size:0.9rem;
line-height:1.7;
white-space:pre-wrap;
min-height:160px
}
@media (max-width:768px){
.results-grid{
grid-template-columns:repeat(2,1fr)
}
.analysis-table{
display:block;
overflow-x:auto
}
.serp-preview,
.og-preview{
max-width:100%
}
.result-card{
padding:18px
}
.result-card .value{
font-size:1.5rem
}
}