.page-wrap{
max-width: 860px;
margin: 0 auto;
padding: 40px 20px 60px;
color: var(--JHnvXfqdFzYm);
}
.page-wrap .updated{
display: inline-block;
font-size: .85rem;
color: var(--szJmNQpIbLIG);
border: 1px solid rgba(255,193,7,.35);
border-radius: 8px;
padding: 4px 12px;
margin-bottom: 24px;
}
.page-wrap h1{
font-size: 2rem;
line-height: 1.2;
margin: 0 0 20px;
}
.page-wrap h2{
font-size: 1.4rem;
margin: 40px 0 14px;
color: #fff;
border-left: 4px solid var(--szJmNQpIbLIG);
padding-left: 14px;
}
.page-wrap h3{
font-size: 1.12rem;
margin: 26px 0 10px;
color: var(--szJmNQpIbLIG);
}
.page-wrap p{
margin: 0 0 16px;
line-height: 1.7;
font-size: 1rem;
}
.page-wrap ul, .page-wrap ol{
margin: 0 0 18px;
padding-left: 22px;
line-height: 1.7;
}
.page-wrap li{
margin-bottom: 10px;
}
.page-wrap a{
color: var(--szJmNQpIbLIG);
text-decoration: underline;
}
.page-wrap a:hover{
color: var(--goldHover);
}
.page-wrap strong{
color: #fff;
}
.page-card{
background: var(--cardBg);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
padding: 20px 22px;
margin: 22px 0;
}
.page-card--warn{
border-color: rgba(255,193,7,.4);
}
.table-scroll{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
margin: 20px 0;
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
}
.page-wrap table{
width: 100%;
min-width: 540px;
border-collapse: collapse;
margin: 0;
background: var(--cardBg);
}
.page-wrap thead th{
background: #14161c;
color: var(--szJmNQpIbLIG);
text-align: left;
padding: 12px 14px;
font-size: .95rem;
white-space: nowrap;
}
.page-wrap tbody td{
padding: 11px 14px;
border-top: 1px solid rgba(255,255,255,.07);
font-size: .95rem;
vertical-align: top;
}
.author-card{
display: flex;
gap: 18px;
align-items: center;
background: var(--cardBg);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
padding: 20px;
margin: 24px 0;
flex-wrap: wrap;
}
.author-card img{
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
.author-card .meta{
flex: 1 1 240px;
}
.author-card .meta h3{
margin: 0 0 4px;
color: #fff;
}
.author-card .meta p{
margin: 0;
font-size: .92rem;
opacity: .85;
}
.contact-form{
background: var(--cardBg);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
padding: 22px;
margin: 22px 0;
}
.contact-form label{
display: block;
margin: 14px 0 6px;
font-weight: 600;
font-size: .92rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
width: 100%;
box-sizing: border-box;
padding: 11px 12px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.14);
background: #14161c;
color: var(--JHnvXfqdFzYm);
font-family: sans-serif;
font-size: .95rem;
}
.contact-form .form-note{
font-size: .82rem;
opacity: .75;
margin: 12px 0;
}
.contact-form button{
margin-top: 14px;
padding: 12px 26px;
background: var(--szJmNQpIbLIG);
color: var(--VRevxcnCMszX);
border: 0;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
transition: background-color .2s ease;
}
.contact-form button:hover{
background: var(--goldHover);
}
.breadcrumbs{
font-size: .82rem;
opacity: .7;
margin-bottom: 18px;
}
.breadcrumbs a{ text-decoration: none; }
.pros-cons{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 22px 0;
}
.pros-cons > div{
background: var(--cardBg);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
padding: 18px 20px;
}
.pros-cons h3{ margin-top: 0; }
.pros-cons .pros h3{ color: #37b24d; }
.pros-cons .cons h3{ color: #ff6b6b; }
@media (max-width: 620px){
.pros-cons{ grid-template-columns: 1fr; }
}