* {
    box-sizing: border-box
}

:root {
    --blue: #1f2322;
    --blue-dark: #171a19;
    --green: #39a944;
    --green-dark: #155c31;
    --text: #2d3840;
    --muted: #758087;
    --line: #d8dfde
}

html,body {
    margin: 0;
    padding: 0
}

body {
    font-family: Arial,Helvetica,sans-serif;
    background: #e9edef;
    color: var(--text);
    font-size: 14px
}

a {
    color: inherit
}

/* SEO/əlçatanlıq: vizual görünüşü DƏYİŞMƏDƏN səhifəyə semantik başlıq
   (H1 və s.) əlavə etmək üçün — ekranda görünmür, axtarış botları və
   ekran oxuyucuları üçün mövcuddur. */
.sr-only {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important
}

.site-wrap {
    min-height: 100vh
}

/* AZTOP-like blue header — this one stays full-bleed (edge to edge);
   only its INNER content (logo, search, login) is centered to the same
   1200px column as the nav/content/footer below it. */
.aztop-header {
    height: 63px;
    background: linear-gradient(#303332,#242625);
    color: #fff;
    border-bottom: 3px solid #3cae47
}

.aztop-head-inner {
    width: 1200px;
    max-width: calc(100% - 28px);
    height: 60px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.aztop-logo {
    height: 60px;
    width: 250px;
    display: flex;
    align-items: center;
    text-decoration: none
}

.aztop-logo img {
    width: 250px;
    height: 60px;
    object-fit: contain;
    object-position: left center;
    display: block
}

.aztop-head-right {
    display: flex;
    align-items: center;
    gap: 9px
}

.aztop-search {
    height: 30px;
    width: 260px;
    display: flex
}

.aztop-search input {
    flex: 1;
    min-width: 0;
    border: 1px solid #b7c3ca;
    border-radius: 3px 0 0 3px;
    background: #fff;
    padding: 0 10px;
    outline: 0;
    color: #4d5960
}

.aztop-search button {
    width: 36px;
    border: 0;
    border-radius: 0 3px 3px 0;
    background: #3cae47;
    color: #fff;
    font-size: 20px
}

.aztop-account {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px
}

.aztop-account a {
    text-decoration: none;
    color: #fff
}

.aztop-account b {
    font-weight: 400;
    color: #d6ebf6
}

/* AZTOP-like white navigation — AZTOP's real #menu is an HTML <table
   width:100%>, so the tabs stretch and spread across the whole bar
   instead of hugging the left. We reproduce that with display:table /
   table-cell (no real <table> tag needed), keeping the search box as a
   separate fixed-width flex sibling pinned to the end. */
.aztop-nav {
    width: 1200px;
    max-width: calc(100% - 28px);
    margin: -11px auto 0;
    height: 43px;
    background: url(img/menu.gif) 0 0 no-repeat;
    position: relative;
    z-index: 10;
}

.aztop-nav-inner {
    width: 100%;
    height: 35px;
    margin: auto;
    display: flex;
    align-items: stretch
}

.aztop-nav-links {
    display: table;
    table-layout: auto;
    width: 100%;
    height: 35px;
    flex: 1;
    min-width: 0
}

.aztop-nav-links>a {
    display: table-cell;
    height: 35px;
    padding: 0 24px;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    color: #000;
    border-right: 1px solid #e5e8e9;
    font-size: 16px;
    background: url(img/cor2.gif) 0 0 no-repeat;
}

.aztop-nav-links>a:first-child {
    border-left: 1px solid #e5e8e9
}

.aztop-nav-links>a:hover,.aztop-nav-links>a.active {
    color: #52626d;
    background: url(img/tophover.gif) 0 0 repeat-x
}

.aztop-nav-inner .nav-add {
    display: none
}

.nav-search {
    margin-left: 14px;
    height: 35px;
    width: 220px;
    display: flex;
    align-items: center;
    flex-shrink: 0
}

.nav-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    padding: 6px 10px;
    outline: 0;
    color: #4d5960;
    background: url(img/searchbg.gif) 0 0 no-repeat;
    background-size: 100% 100%
}

.nav-search button {
    width: 36px;
    height: 100%;
    border: 0;
    background: url(img/go.gif) 0 0 no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    font-size: 0
}

.nav-search button:hover {
    opacity: .85
}

/* page grids */
.az-page {
    width: 1200px;
    max-width: calc(100% - 28px);
    margin: 13px auto 22px;
    display: grid;
    grid-template-columns: 240px minmax(0,1fr) 240px;
    gap: 12px;
    align-items: start
}

.az-page.az-inner-page {
    grid-template-columns: minmax(0,1fr) 240px
}

.az-left,.az-content,.az-right {
    min-width: 0
}

/* side cards */
.az-side-card {
    background: #fff;
    border: 1px solid #d8dede;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    margin-bottom: 12px
}

.az-side-title {
    height: 45px;
    padding: 0 14px;
    background: linear-gradient(#196d37,#155d30);
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700
}

.az-side-title span {
    color: #e0fa99;
    font-size: 18px;
    margin-right: 9px
}

.az-cat {
    height: 36px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: #455159;
    border-bottom: 1px solid #e3e7e7;
    background: #fff
}

.az-cat span {
    display: flex;
    align-items: center;
    gap: 8px
}

.az-cat span b {
    width: 20px;
    text-align: center;
    color: #516069
}

.az-cat em {
    font-style: normal;
    min-width: 33px;
    padding: 4px 7px;
    text-align: center;
    border-radius: 13px;
    background: #edf1f1;
    color: #667078;
    font-size: 11px
}

.az-cat.active {
    margin: 4px 0;
    background: #55b64f;
    border-radius: 3px;
    color: #fff;
    border: 0
}

.az-cat.active span b,.az-cat.active em {
    color: #fff
}

.az-cat.active em {
    background: rgba(255,255,255,.17)
}

.az-info p {
    margin: 12px 14px;
    line-height: 19px;
    color: #56636b
}

.az-green-btn,.az-outline-btn {
    height: 39px;
    margin: 0 14px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700
}

.az-green-btn {
    background: #57b64f;
    color: #fff
}

.az-outline-btn {
    border: 1px solid #5cb558;
    color: #348b31;
    background: #fff
}

.az-stat {
    padding-bottom: 4px
}

.az-stat p {
    display: flex;
    gap: 6px;
    margin: 4px 14px;
    color: #556169
}

.az-stat p span {
    flex: 1
}

.az-stat p b {
    font-weight: 400
}

.az-stat h3 {
    margin: 15px 14px 7px;
    color: #288d39;
    text-decoration: underline;
    font-size: 14px
}

.az-news>a {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #edf0ef;
    text-decoration: none
}

.az-news>a span {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 3px;
    background: #e4f3e5;
    color: #3b9f43
}

.az-news>a div {
    flex: 1
}

.az-news small,.az-news b {
    display: block
}

.az-news small {
    font-size: 10px;
    color: #808b91
}

.az-news b {
    font-size: 11px;
    line-height: 1.35
}

.az-news .all-news {
    justify-content: flex-end;
    color: #31923a;
    font-weight: 700;
    border: 0
}

.az-social>div {
    display: flex;
    gap: 9px;
    padding: 10px
}

.az-social>div a {
    width: 42px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    background: #259dd5
}

.az-social>div a:nth-child(2) {
    background: #4b77b5
}

.az-social>div a:nth-child(3) {
    background: #e33135
}

.az-social>div a:nth-child(4) {
    background: #111
}

/* home top 100 */
.rank-hero {
    height: 125px;
    border-radius: 6px;
    background: linear-gradient(100deg,#13351f,#1f7538 72%,#135a2b);
    display: flex;
    align-items: center;
    padding: 0 22px;
    color: #fff;
    position: relative;
    overflow: hidden
}

.hero-trophy {
    width: 130px;
    text-align: center;
    font-size: 65px
}

.hero-copy h1 {
    margin: 0;
    color: #f0d84e;
    font-size: 38px
}

.hero-copy p {
    margin: 4px 0;
    font-size: 18px
}

.hero-copy small {
    font-size: 11px;
    color: #dcebdd
}

.hero-bars {
    position: absolute;
    right: 15px;
    bottom: 4px;
    display: flex;
    gap: 5px;
    align-items: flex-end;
    opacity: .5
}

.hero-bars i {
    width: 11px;
    background: #58b667;
    display: block
}

.hero-bars i:nth-child(1) {
    height: 30px
}

.hero-bars i:nth-child(2) {
    height: 47px
}

.hero-bars i:nth-child(3) {
    height: 69px
}

.hero-bars i:nth-child(4) {
    height: 91px
}

.rank-tabs-card {
    margin-top: 13px;
    background: #175e30;
    color: #fff;
    border-radius: 6px 6px 0 0;
    overflow: hidden
}

.rank-tabs-title {
    height: 43px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 700
}

.rank-tabs-title>span {
    color: #e4ef75;
    font-size: 20px;
    margin-right: 9px
}

.rank-tabs-title>div {
    margin-left: auto;
    height: 100%;
    display: flex
}

.rank-tabs-title a {
    padding: 0 9px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-size: 12px
}

.rank-tabs-title a.active {
    background: #459256
}

.top-table-card {
    background: #fff;
    border: 1px solid #d8dfdf;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    overflow: hidden
}

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

.rank-table th {
    height: 36px;
    background: #f0f2f3;
    border-bottom: 1px solid #d7dddd;
    color: #57636b;
    text-align: left;
    font-size: 11px;
    font-weight: 400;
    padding: 0 8px
}

.rank-table th:first-child {
    width: 50px;
    text-align: center
}

.rank-table th:nth-child(3),.rank-table th:nth-child(4) {
    width: 95px
}

.rank-table th:last-child {
    width: 48px
}

.rank-table td {
    height: 64px;
    padding: 5px 8px;
    border-bottom: 1px dotted #cfd6d4
}

.rank-table tbody tr:last-child td {
    border: 0
}

.rank-badge {
    width: 27px;
    height: 32px;
    margin: auto;
    display: grid;
    place-items: center;
    border-radius: 2px;
    background: #aab2b5;
    color: #fff;
    font-weight: 700
}

.rank-badge.r1 {
    background: #ffeb00;
    color: #475000
}

.rank-badge.r2 {
    background: #aeb5b8
}

.rank-badge.r3 {
    background: #e67114
}

.rank-badge.vip-badge {
    background: linear-gradient(180deg, #ffd766, #f0a500);
    color: #5b3b00;
    font-size: 16px
}

.site-cell {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0
}

.site-cell img {
    width: 31px;
    height: 31px;
    border-radius: 3px;
    object-fit: cover
}

.site-cell div {
    min-width: 0
}

.site-cell strong {
    display: block;
    color: #087f34;
    font-size: 13px
}

.site-cell small {
    display: block;
    color: #778188;
    font-size: 11px;
    line-height: 14px;
    margin-top: 2px;
    max-width: 500px
}

.rank-table td:nth-child(3) {
    font-weight: 700;
    color: #2d363b
}

.rank-table td:nth-child(4) {
    color: #52616d
}

.row-stat {
    width: 29px;
    height: 34px;
    border: 1px solid #cfe0d3;
    border-radius: 3px;
    display: grid;
    place-items: center;
    color: #3fa94d;
    text-decoration: none;
    background: #f7faf7
}

.pagination,.nav-pages {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 10px
}

.pagination a,.pagination span,.nav-pages a,.nav-pages span {
    min-width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border: 1px solid #d6dfdc;
    border-radius: 3px;
    background: #f7f8f8;
    text-decoration: none
}

.pagination .active,.nav-pages .active {
    background: #54ad4c;
    color: #fff;
    border-color: #54ad4c
}

.topni {
    margin-top: 0;
    border-top: 1px solid #d5dde0;
    background: #eef2f4;
    padding: 0 12px
}

.aztop-pagination {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 0;
    border-bottom: 1px solid #d5dde0
}

.aztop-pagination a,.aztop-pagination .current {
    flex: 1;
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #1e3f52;
    font-size: 12px;
    border-bottom: 1px solid transparent
}

.aztop-pagination .current {
    min-width: 29px;
    height: 22px;
    margin: 0 18px;
    background: #708e6d;
    color: #fff;
    border-radius: 3px;
    font-weight: 700;
    border-bottom: 0
}

.aztop-pagination a:hover {
    background: #e4eaed
}

.aztop-pagination b {
    font-weight: 400
}

/* Inner pages: AZTOP-like large white content card */
.az-inner-page .az-content {
    background: #fff;
    border: 1px solid #d8dddd;
    border-radius: 8px;
    min-height: 490px;
    padding: 24px 32px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06)
}

.az-inner-page .az-content .title,.az-inner-page .az-content .title2 {
    font-size: 20px;
    font-weight: 700;
    color: #151b1f;
    padding: 0 0 12px;
    margin: 0 0 14px;
    border-bottom: 1px solid #d8dddd;
    background: transparent
}

.az-inner-page .az-content .main {
    background: #fff;
    border: 0;
    border-bottom: 1px solid #edf0ef;
    padding: 10px 0;
    margin: 0;
    color: #4f5b63;
    line-height: 1.55
}

.az-inner-page .az-content .info,.az-inner-page .az-content .error {
    padding: 10px 12px;
    border-radius: 4px;
    margin: 10px 0;
    background: #f4f7f7;
    border: 1px solid #dce3e1
}

.az-inner-page .az-content input[type=text],.az-inner-page .az-content input[type=password],.az-inner-page .az-content input[type=email],.az-inner-page .az-content input[type=url],.az-inner-page .az-content textarea,.az-inner-page .az-content select {
    border: 1px solid #bcc6ca;
    border-radius: 3px;
    background: #fff;
    padding: 9px;
    outline: 0;
    max-width: 100%
}

.az-inner-page .az-content input[type=submit] {
    background: #67b84e;
    color: #173c16;
    border: 1px solid #4b9d39;
    border-radius: 2px;
    padding: 8px 18px;
    font-weight: 700
}

.az-inner-page .az-content a {
    color: #1672ad
}

/* Footer — saytın qalan hissəsindəki ağ kart dizaynı ilə eyni dil.
   Köhnə "footer.gif" təkrarlanan fon şəkli (üstündə lazımsız uzun xətt
   və altında boz "kölgəlik" kimi görünən sahə yaradırdı) çıxarıldı. */
.az-footer {
    width: 1200px;
    max-width: calc(100% - 28px);
    margin: 24px auto 0;
    background: #fff;
    border: 1px solid #d8dede;
    border-top: 3px solid #196d37;
    border-radius: 8px 8px 0 0;
    color: #57707e;
    box-shadow: 0 1px 2px rgba(0,0,0,.06)
}

.az-footer-inner {
    width: 100%;
    min-height: 56px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 12px 18px
}

.az-footer-inner>div {
    flex: 1
}

.az-footer a {
    font-size: 12px;
    margin-right: 14px;
    text-decoration: none;
    color: #455159;
    font-weight: 600
}

.az-footer a:hover {
    color: #196d37
}

.az-footer small {
    font-size: 11px;
    color: #8b979d
}

/* Internal pages are always two columns, no left category menu */
.az-inner-page .az-right {
    display: block
}

/* responsive */
@media(max-width: 1000px) {
    .aztop-head-inner,.aztop-nav,.az-page,.az-footer {
        max-width:calc(100% - 20px)
    }

    .az-page {
        grid-template-columns: 210px minmax(0,1fr) 220px
    }

    .az-page.az-inner-page {
        grid-template-columns: minmax(0,1fr) 220px
    }

    .aztop-nav-links>a {
        padding: 0 10px
    }

    .nav-search {
        width: 200px
    }
}

@media(max-width: 760px) {
    .aztop-header {
        height:auto
    }

    .aztop-head-inner {
        height: auto;
        min-height: 54px;
        padding-top: 6px;
        padding-bottom: 6px
    }

    .aztop-logo {
        width: 150px
    }

    .aztop-logo img {
        width: 150px
    }

    .aztop-head-right {
        padding-right: 0
    }

    .aztop-account {
        font-size: 12px
    }

    .aztop-nav {
        height: auto
    }

    .aztop-nav-inner {
        height: auto;
        flex-wrap: wrap
    }

    .aztop-nav-links {
        display: flex;
        flex: 1 1 100%;
        flex-wrap: wrap;
        table-layout: fixed;
        width: 100%
    }

    .aztop-nav-links>a {
        display: none
    }

    /* Mobildə yalnız 4 əsas bölmə göstərilir: Top 100, Xəbərlər,
       Kateqoriyalar, Əlaqə (head.php-də bu linklərə "mob-show" class-ı
       əlavə olunub, sıra deyil, class təyin edir). */
    .aztop-nav-links>a.mob-show {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        flex: 1 0 25%;
        padding: 2px 4px;
        font-size: 11px;
        white-space: normal;
        line-height: 1.15;
        text-align: center
    }

    .az-page,.az-page.az-inner-page {
        display: block;
        width: auto;
        max-width: none;
        margin: 8px
    }

    .az-left {
        display: none
    }

    .aztop-rating-card,.aztop-mysites-card,.aztop-stats-card,.aztop-summary-card {
        display: none
    }

    .az-right {
        width: auto
    }

    .az-ad-card {
        margin-bottom: 10px
    }

    .az-inner-page .az-content {
        padding: 17px 14px;
        min-height: 0
    }

    .rank-hero {
        height: 105px
    }

    .hero-trophy {
        width: 75px;
        font-size: 48px
    }

    .hero-copy h1 {
        font-size: 28px
    }

    .hero-copy p {
        font-size: 14px
    }

    .hero-copy small,.hero-bars {
        display: none
    }

    .rank-table th:nth-child(3),.rank-table td:nth-child(3),.rank-table th:nth-child(4),.rank-table td:nth-child(4) {
        display: none
    }

    .az-footer-inner {
        display: block;
        text-align: center
    }

    .az-footer img {
        margin-bottom: 7px
    }
}

/* AZTOP clean AZTOP-inspired content */
.rank-hero {
    height: 54px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(#71899a,#5f788a);
    padding: 0 14px;
    box-shadow: none
}

.hero-trophy {
    display: none
}

.hero-copy {
    display: flex;
    align-items: center;
    gap: 18px
}

.hero-copy h1 {
    margin: 0;
    color: #fff;
    font-size: 17px
}

.hero-copy p {
    display: none
}

.hero-copy small {
    font-size: 12px;
    color: #eaf0f3
}

.hero-bars {
    display: none
}

.rank-tabs-card {
    margin-top: 0;
    border-radius: 0;
    background: #155c31;
    border: 0
}

.rank-tabs-title {
    height: 42px
}

.rank-summary {
    background: #fff;
    color: #53616a;
    border-left: 1px solid #d8dfdf;
    border-right: 1px solid #d8dfdf;
    padding: 7px 12px;
    font-size: 12px
}

.rank-summary span {
    margin-right: 18px
}

.rank-summary b {
    color: #176c35
}

.top-table-card {
    border-radius: 0 0 6px 6px
}

.rank-table th {
    font-size: 12px
}

.rank-table td {
    height: 58px
}

/* Cabinet */
.office-title,.page-title-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d7dddd;
    margin-bottom: 18px;
    padding-bottom: 14px
}

.office-title h1,.page-title-card h1 {
    margin: 4px 0 6px;
    font-size: 28px;
    color: #17232a
}

.office-title p,.page-title-card p {
    margin: 0;
    color: #68757c
}

.section-kicker,.eyebrow {
    font-size: 12px;
    color: #6d7b82;
    font-weight: 700;
    letter-spacing: .2px
}

.office-actions-card {
    border: 1px solid #d8dfdf;
    border-radius: 6px;
    background: #fff;
    padding: 18px;
    margin: 0 0 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04)
}

.office-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e2e6e6
}

.office-card-title b {
    display: block;
    font-size: 16px
}

.office-card-title small {
    display: block;
    color: #7a858b;
    margin-top: 3px
}

.office-icon {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    display: grid;
    place-items: center;
    background: #edf5ef;
    color: #25853a;
    font-size: 18px
}

.office-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.office-action {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid #d9dfdf;
    border-radius: 4px;
    padding: 13px;
    text-decoration: none;
    background: #fafbfb;
    color: #1e2b31
}

.office-action:hover {
    border-color: #63b569;
    background: #f4faf4
}

.office-action>span {
    color: #3cae47;
    font-size: 18px
}

.office-action b {
    font-size: 14px
}

.office-action small {
    color: #7a858b
}

.office-action.primary {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    background: #3cae47;
    color: #fff;
    border-color: #31933a;
    padding: 9px 14px
}

.office-logout {
    display: inline-block;
    margin-top: 14px;
    color: #1972a8;
    text-decoration: none
}

.office-progress {
    background: #fff;
    border: 1px solid #d8dfdf;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px
}

.office-progress-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px
}

.progress-bar {
    height: 9px;
    background: #e8eeee;
    border-radius: 5px;
    overflow: hidden
}

.progress-bar span {
    display: block;
    height: 100%;
    background: #48aa52
}

.office-platform-card {
    border: 1px solid #d8dfdf;
    border-radius: 6px;
    background: #fff;
    padding: 16px;
    margin-bottom: 10px
}

.platform-head,.platform-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.platform-name {
    font-weight: 700;
    color: #168039;
    text-decoration: none
}

.platform-id {
    font-size: 11px;
    color: #899298;
    margin-left: 8px
}

.platform-desc {
    padding: 9px 0;
    color: #67737a
}

.platform-tools {
    justify-content: flex-start
}

.office-mini-btn {
    border: 1px solid #cfdad3;
    background: #f8faf8;
    padding: 6px 9px;
    border-radius: 3px;
    text-decoration: none;
    color: #287f38;
    font-size: 12px
}

.platform-status {
    font-size: 12px
}

.green-dot,.yellow-dot,.red-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px
}

.green-dot {
    background: #45ad51
}

.yellow-dot {
    background: #e5b42e
}

.red-dot {
    background: #d85454
}

/* Statistics */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin-bottom: 14px
}

.metric-card {
    border: 1px solid #d8dfdf;
    border-radius: 5px;
    background: #fff;
    padding: 14px
}

.metric-card b {
    display: block;
    font-size: 23px;
    color: #1f343c;
    margin-top: 5px
}

.metric-card small {
    color: #758087
}

.metric-icon {
    font-size: 16px;
    color: #3cae47
}

.stats-period-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-bottom: 14px
}

.stats-period {
    background: #fff;
    border: 1px solid #d8dfdf;
    border-radius: 5px;
    overflow: hidden
}

.stats-period-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px;
    background: #f3f5f5;
    border-bottom: 1px solid #dce1e1
}

.stats-period-head>span {
    color: #3cae47
}

.stats-period-head b,.stats-period-head small {
    display: block
}

.stats-period-head small {
    font-size: 11px;
    color: #7b858b;
    margin-top: 2px
}

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

.stats-values div {
    padding: 11px;
    border-right: 1px solid #edf0f0;
    border-bottom: 1px solid #edf0f0
}

.stats-values b {
    display: block;
    font-size: 17px;
    color: #24353d
}

.stats-values small {
    color: #7a858b
}

.section-block,.latest-stat-card {
    background: #fff;
    border: 1px solid #d8dfdf;
    border-radius: 5px;
    margin-bottom: 14px;
    padding: 16px
}

.section-heading h2,.latest-stat-card h3 {
    margin: 4px 0 0;
    font-size: 19px
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 14px
}

.status-grid>div {
    display: flex;
    gap: 9px;
    align-items: center;
    border: 1px solid #e0e5e4;
    padding: 12px;
    border-radius: 4px
}

.status-grid b,.status-grid small {
    display: block
}

.latest-site {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px
}

.latest-site a {
    color: #1672ad
}

.latest-site small {
    display: block;
    color: #78838a;
    margin-top: 3px
}

@media(max-width: 760px) {
    .office-grid,.stats-grid,.stats-period-grid,.status-grid {
        grid-template-columns:1fr
    }

    .platform-head,.platform-tools {
        align-items: flex-start;
        flex-direction: column
    }

    .hero-copy small {
        display: none
    }
}

/* Header refinements: real AZTOP bbg.png is a flat #2188C9 tile that
   repeats along the top of the page — use it directly for an exact
   colour match instead of the earlier guessed gradient. */
.aztop-header {
    background: #2188c9 url(img/bbg.png) 50% 0 repeat-x;
    border-bottom: 0;
}

.aztop-logo {
    width: 250px
}

.aztop-logo img {
    width: 250px;
    height: 60px;
    object-fit: contain;
    object-position: left center;
    display: block
}

.aztop-head-right {
    margin-left: auto;
    padding-right: 14px;
    gap: 16px
}

/* Advertisement sidebar blocks */
.az-ad-card .az-side-title {
    background: linear-gradient(#196d37,#155d30)
}

.az-ad-list {
    padding: 6px 0
}

.az-ad-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid #edf0ef;
    text-decoration: none;
    color: #2e5e38;
    line-height: 1.25
}

.az-ad-item:hover {
    background: #f5faf5
}

.az-ad-item span {
    color: #4eaa54;
    font-size: 9px
}

.az-ad-footer {
    display: block;
    padding: 10px 12px;
    color: #2f8d37!important;
    text-decoration: none;
    font-weight: 700;
    border-top: 1px solid #edf0ef
}

.az-ad-empty {
    padding: 14px;
    color: #68757c;
    line-height: 1.45
}

.az-ad-empty a {
    color: #2f8d37;
    text-decoration: none;
    font-weight: 700
}

.aztop-side-head {
    height: 45px;
    background: #fff;
    border-bottom: 1px solid #dce2e4;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #151b1f
}

.aztop-side-head b {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px
}

.aztop-side-head b img {
    width: 16px;
    height: 16px;
    object-fit: contain
}

.aztop-title-icon {
    opacity: .9
}

.az-ad-card .aztop-side-head {
    border-bottom: 1px solid #dce2e4
}

.aztop-head-icon {
    width: 30px!important;
    height: 30px!important;
    opacity: .25
}

.aztop-side-body {
    padding: 12px 14px;
    color: #617079;
    line-height: 1.35
}

.aztop-side-body p {
    margin: 0 0 12px
}

.aztop-side-body strong {
    color: #2d7d35
}

.aztop-side-body b {
    color: #2c363b
}

.aztop-button {
    display: inline-block;
    height: 31px;
    background: #95c076 url(img/green3.gif) 0 0 no-repeat
}

.aztop-button a {
    display: block;
    height: 31px;
    padding: 0 36px 0 9px;
    font-weight: 700;
    font-size: 12px;
    color: #2F400B !important;
    text-decoration: none;
    line-height: 31px;
    background: url(img/green4.gif) 100% 0 no-repeat;
    font-family: Arial
}

.aztop-button:hover {
    background-position: 0 -31px
}

.aztop-button a:hover {
    background-position: 100% -31px;
    color: #2F400B
}

.aztop-stats-body {
    padding-top: 10px
}

.aztop-stat-section {
    margin: 8px 0 14px
}

.aztop-stat-section>a {
    display: block;
    color: #1672ad;
    font-weight: 700;
    text-decoration: underline;
    margin-bottom: 3px
}

.aztop-stat-section div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    line-height: 17px
}

.aztop-stat-section div span {
    color: #53636c
}

.aztop-stat-section div b {
    font-weight: 400;
    color: #52677a
}

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

.az-summary-table td {
    padding: 2px 0;
    line-height: 19px;
    font-size: 13px
}

.az-summary-table td:first-child {
    color: #53636c
}

.az-summary-table td:last-child {
    text-align: right;
    color: #17232a;
    font-weight: 700
}

.az-bullet-list {
    margin: 0 0 10px;
    padding: 0 0 0 16px;
    color: #53636c;
    font-size: 13px;
    line-height: 1.55
}

.az-bullet-list li {
    margin-bottom: 2px
}

.az-mysites-list {
    margin: 0 0 12px;
    padding: 0;
    list-style: none
}

.az-mysites-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-radius: 4px
}

.az-mysites-list li:hover {
    background: #f0f4f2
}

.az-mysites-list a {
    color: #266198;
    font-size: 14px;
    text-decoration: none
}

.az-mysites-list a:hover {
    text-decoration: underline
}

.az-mysite-dot-active,.az-mysite-dot-pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 10px;
    border-radius: 4px;
    flex-shrink: 0
}

.az-mysite-dot-active {
    background: #e5f5e0;
    color: #3f9c33
}

.az-mysite-dot-pending {
    background: #eef1f2;
    color: #96a1a6
}

.az-mysites-empty {
    color: #96a1a6;
    font-size: 13px;
    padding: 4px
}

.az-demo-link {
    display: block;
    margin-bottom: 10px;
    color: #1672ad;
    font-weight: 700;
    text-decoration: none
}

.az-demo-link:hover {
    text-decoration: underline
}

.aztop-more-btn {
    height: 36px;
    border: 1px solid #4d9e3d;
    background: #57b64f;
    color: #fff!important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: 3px
}

.aztop-more-btn:hover {
    background: #4da945
}

.aztop-more-btn span {
    margin-left: 9px;
    font-size: 16px
}

.aztop-rating-card,.aztop-mysites-card,.aztop-stats-card,.aztop-summary-card {
    border-radius: 8px
}

.az-right .aztop-rating-card,.az-right .aztop-mysites-card,.az-right .aztop-stats-card,.az-right .aztop-summary-card {
    margin-bottom: 12px
}

/* Category pages use exactly the same clean ranking table as the home page */
.category-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #d8dddd;
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 12px
}

.category-heading h1 {
    margin: 3px 0 5px;
    font-size: 24px;
    color: #17232a
}

.category-heading p {
    margin: 0;
    color: #718087
}

.category-rank-tabs {
    margin-top: 0;
    border-radius: 6px 6px 0 0
}

/* Kateqoriyalar siyahısı səhifəsi (/m/category) */
.categories-list-card {
    padding: 4px 0
}

.categories-list-card .az-cat {
    padding: 0 16px
}

.categories-list-card .az-cat:last-child {
    border-bottom: 0
}

.categories-list-card .az-cat:hover {
    background: #f6f9f8
}

.az-cat.empty {
    color: #a7b0b5
}

.az-cat.empty em {
    background: #f4f6f6;
    color: #a7b0b5
}

/* GOLD saytlar bloku (kateqoriyalar səhifəsində) */
.az-gold-card .az-side-title {
    background: linear-gradient(90deg,#ce0025,#8a006f,#4600b9,#2400de)
}

.az-gold-list {
    padding: 4px 14px
}

.az-gold-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid #eef1f1
}

.az-gold-item:last-child {
    border-bottom: 0
}

.az-gold-badge {
    background: linear-gradient(90deg,#ce0025,#8a006f,#4600b9,#2400de);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 3px 7px;
    border-radius: 3px;
    flex: 0 0 auto
}

.az-gold-item a {
    color: #087c37;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px
}

.az-gold-item a:hover {
    text-decoration: underline
}

.az-gold-item small {
    flex-basis: 100%;
    color: #748087;
    font-size: 12px
}

.empty-category {
    padding: 35px!important;
    text-align: center;
    color: #748087
}

/* Sayğac şəkillərinin ölçüsü (счётчик) — office.php "Код счётчика" bölməsindəki
   .counter-badge-small/.counter-badge-big img-ları üçün sabit ölçü */
.counter-badge-small {
    width: 72px;
    height: 15px;
    max-width: 100%
}

.counter-badge-big {
    width: 72px;
    height: 25px;
    max-width: 100%
}

.counter-option {
    display: inline-block;
    vertical-align: middle;
    margin: 4px 8px 4px 0
}

.counter-preview {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px
}

/* Authentication */
.auth-heading {
    padding: 0 0 15px;
    border-bottom: 1px solid #d8dddd;
    margin-bottom: 18px
}

.auth-heading h1 {
    margin: 5px 0;
    font-size: 25px;
    color: #17232a
}

.auth-heading p {
    margin: 0;
    color: #6f7c83
}

.auth-form-card {
    max-width: 620px;
    margin: 0 auto;
    background: #f5f6f6;
    border: 1px solid #d5dcdc;
    border-radius: 4px;
    padding: 20px
}

.auth-field {
    padding: 0 0 14px
}

.auth-field label {
    display: block;
    font-weight: 700;
    color: #26343b;
    margin-bottom: 7px
}

.auth-field input {
    display: block;
    width: 100%;
    height: 38px!important;
    background: #fff!important;
    padding: 8px 10px!important
}

.auth-field img {
    display: block;
    margin-bottom: 7px
}

.auth-submit-wrap {
    max-width: 620px;
    margin: 16px auto 0;
    text-align: center
}

.auth-submit {
    height: 40px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid #4d9e3d;
    border-radius: 20px;
    background: #57b64f;
    color: #fff;
    font-weight: 700;
    cursor: pointer
}

/* Ox işarəli (▶) düymələrdə (məs. "Mesaj göndər") dairə sağ kənara
   sıx otursun deyə sağ padding-i azaldırıq; sadə mətnli düymələr
   (Giriş, Qeydiyyatdan keç) yuxarıdakı simmetrik padding ilə
   düz mərkəzdə qalır. */
.auth-submit:has(.auth-submit-arrow) {
    padding: 0 6px 0 24px
}

.auth-submit:hover {
    background: #4da945
}

.auth-submit-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px
}

.auth-links {
    max-width: 540px;
    margin: 14px auto 0;
    display: flex;
    gap: 20px;
    padding-top: 14px;
    border-top: 1px solid #e0e4e4
}

.auth-links a {
    color: #1672ad;
    text-decoration: none
}

.contact-row {
    display: flex;
    gap: 14px
}

.contact-row .auth-field {
    flex: 1
}

.contact-topics {
    margin-top: 7px;
    font-size: 12px;
    color: #8a949a
}

.contact-topics a {
    color: #1672ad;
    text-decoration: none
}

.contact-topics a:hover {
    text-decoration: underline
}

/* Admin panel */
.admin-title-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #d8dddd;
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 14px
}

.admin-title-card h1 {
    margin: 4px 0 5px;
    font-size: 27px;
    color: #17232a
}

.admin-title-card p {
    margin: 0;
    color: #718087
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 15px;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid #cbd5d1
}

.btn-primary {
    background: #57b64f;
    color: #fff;
    border-color: #4c9f43
}

.az-inner-page .az-content a.btn-primary {
    color: #fff
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin-bottom: 14px
}

.admin-metrics>div {
    background: #fff;
    border: 1px solid #d8dddd;
    border-radius: 5px;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 10px;
    align-items: center
}

.admin-metrics>div>span {
    grid-row: 1/3;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #edf6ef;
    color: #3a9d47;
    display: grid;
    place-items: center;
    font-size: 17px
}

.admin-metrics b {
    font-size: 22px;
    color: #20353d
}

.admin-metrics small {
    color: #758087
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.admin-tool {
    min-height: 82px;
    background: #fff;
    border: 1px solid #d8dddd;
    border-left: 4px solid #57b64f;
    border-radius: 5px;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: 42px 1fr auto auto;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #1d2b31;
    box-shadow: 0 1px 2px rgba(0,0,0,.04)
}

.admin-tool:hover {
    background: #f8fbf8;
    border-color: #cbd8ce
}

.admin-tool-icon {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    background: #edf6ef;
    color: #2f963d;
    display: grid;
    place-items: center;
    font-size: 18px
}

.admin-tool b {
    display: block;
    font-size: 14px
}

.admin-tool small {
    display: block;
    margin-top: 4px;
    color: #77838a;
    line-height: 1.3
}

.admin-tool strong {
    color: #57a35b;
    font-size: 18px
}

.admin-badge {
    min-width: 27px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: #eaf5ea;
    color: #2f8d37;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700
}

.admin-tool.warn {
    border-left-color: #e0aa2e
}

.admin-tool.warn .admin-tool-icon {
    background: #fff7df;
    color: #b88416
}

.admin-tool.gold {
    border-left-color: #d6ae2d
}

.admin-tool.gold .admin-tool-icon {
    background: #fff7dc;
    color: #b78916
}

.admin-tool.orange {
    border-left-color: #db8b31
}

.admin-tool.orange .admin-tool-icon {
    background: #fff1e4;
    color: #c46f18
}

.admin-tool.purple {
    border-left-color: #8d63b5
}

.admin-tool.purple .admin-tool-icon {
    background: #f3ebfa;
    color: #7c4ca7
}

.admin-tool.dark {
    border-left-color: #4b555a
}

.admin-tool.dark .admin-tool-icon {
    background: #edf0f1;
    color: #4d5b62
}

/* Legacy admin/form elements get the same clean spacing */
.az-inner-page .az-content form {
    max-width: 760px
}

.az-inner-page .az-content .title2 + .main {
    margin-top: 0
}

.az-inner-page .az-content .main br {
    line-height: 1.8
}

.az-inner-page .az-content .main input[type=text],.az-inner-page .az-content .main input[type=password],.az-inner-page .az-content .main input[type=email],.az-inner-page .az-content .main select,.az-inner-page .az-content .main textarea {
    margin: 4px 0 10px;
    min-height: 36px
}

@media(max-width: 760px) {
    html,body {
        overflow-x: hidden
    }

    .aztop-head-inner {
        padding: 6px 8px
    }

    /* The unscoped "Header refinements" block further up forces the
       logo back to its full 250px desktop size, which is wider than
       small screens and was pushing/overflowing the header (the
       "boşluq solda" gap). Re-apply the compact mobile size here so
       it wins the cascade. */
    .aztop-logo {
        width: 150px;
        min-width: 0
    }

    .aztop-logo img {
        width: 150px;
        height: auto;
        max-height: 44px
    }

    .nav-search {
        width: 100%;
        margin: 14px 0 0;
        border-left: 0
    }

    .aztop-nav-inner {
        padding: 0;
        display: flex
    }

    .aztop-nav-links>a {
        min-width: 0
    }

    .admin-metrics,.admin-grid {
        grid-template-columns: 1fr
    }

    .admin-title-card,.category-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px
    }

    .auth-form-card,.auth-links {
        max-width: none
    }

    .nav-search input {
        min-width: 0
    }

    .contact-row {
        flex-direction: column;
        gap: 0
    }
}

/* v7 final refinements */
.site-cell img {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 2px;
    object-fit: contain
}

.row-stat img {
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain
}

.rank-tabs-title {
    height: 42px
}

.rank-tabs-title>div {
    display: none
}

.rank-hero {
    display: none
}

/* DESIGN 3 — Top-100 + Categories only */
.az-home-page .az-page {
    width: 1280px;
    max-width: calc(100% - 28px);
    grid-template-columns: 286px minmax(0,1fr) 286px;
    gap: 14px;
    margin-top: 14px
}

.az-home-page .az-side-card {
    border-radius: 7px
}

.az-home-page .az-side-title {
    height: 50px;
    font-size: 16px;
    padding: 0 16px;
    background: #126334
}

.az-home-page .az-side-title span {
    font-size: 19px
}

.az-home-page .az-cat {
    height: 40px;
    padding: 0 13px;
    font-size: 15px;
    border-bottom: 1px solid #e1e6e7
}

.az-home-page .az-cat span {
    gap: 11px;
    white-space: nowrap
}

.az-home-page .az-cat span b {
    width: 22px;
    font-size: 18px;
    color: #50616b;
    line-height: 1;
    text-align: center
}

.az-home-page .az-cat .cat-icon {
    font-size: 17px
}

.az-home-page .az-cat em {
    min-width: 34px;
    padding: 4px 8px;
    background: #edf1f1;
    color: #5e6b72;
    font-size: 11px
}

.az-home-page .az-cat.active {
    margin: 0;
    background: #4bb74e;
    border-radius: 0;
    color: #fff;
    height: 42px
}

.az-home-page .az-cat.active span b {
    color: #fff
}

.az-home-page .az-cat.active em {
    background: rgba(255,255,255,.22);
    color: #fff
}

/* Sol kateqoriya menyusu — atılan "Топ-100" şəklinə bir-bir uyğun: TOP-100
   siyahının BİRİNCİ sətri kimi (ayrıca başlıq yox, elə kateqoriyalar
   kimi eyni .az-cat sətri), sadə (zolaqsız) sətirlər, tutqun mavi-boz
   say rəqəmləri. Aktiv sətir (TOP-100 və ya seçilmiş kateqoriya) — hamar
   CSS mavi qradiyenti ilə (şəkilə əsaslanmır ki, hər genişlikdə eyni
   səliqəli görsənsin, rəqəm həmişə oxunaqlı qalsın). */
.az-home-page .az-categories {
    border: 1px solid #cfe0ee;
    border-radius: 6px;
    overflow-x: visible;
    overflow-y: hidden
}

.az-home-page .az-categories .az-cat {
    height: 30px;
    padding: 0 14px;
    font-size: 15px;
    color: #3F4345;
    border-bottom: 1px solid #edf1f1;
    background: #fff url(img/lf1.gif) 0 0 repeat-x
}

.az-home-page .az-categories .az-cat:last-child {
    border-bottom: 0
}

.az-home-page .az-categories .az-cat span {
    gap: 0
}

.az-home-page .az-categories .az-cat span b {
    display: none
}

.az-home-page .az-categories .az-cat em {
    background: none;
    color: #A5ACB3;
    padding: 0;
    min-width: auto;
    font-size: 11px;
    font-weight: 400;
    font-style: normal
}

.az-home-page .az-categories .az-cat:hover {
    background: #f5f9fc
}

.az-home-page .az-categories .az-cat.active {
    position: relative;
    margin: 0;
    height: 31px;
    padding: 0 0 0 16px;
    background: url(img/lffst.gif) 0 0 no-repeat;
    border: 0;
    border-radius: 0;
    color: #263138;
    font-weight: 700
}

.az-home-page .az-categories .az-cat.active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 81px;
    height: 31px;
    background: url(img/lffst2.png) 100% 0 no-repeat
}

.az-home-page .az-categories .az-cat.active em {
    display: none
}

.az-home-page .az-categories .az-cat-top100.active::after {
    background: url(img/lffst2.gif) 100% 0 no-repeat
}



.az-home-page .az-categories .az-cat-top100 span:first-child {
    font-weight: 700
}

.az-home-page .az-categories .az-cat-all {
    font-weight: 700;
    font-size: 15px;
    color: #263138;
    background: #fff;
    border-bottom: 1px solid #edf1f1
}

.az-top100-card {
    background: #fff;
    border: 1px solid #d7dedf;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.05)
}

/* Mobildə cədvəl başlığı əvəzinə göstərilən sadə "Saytlar" zolağı —
   cədvəl sütunlarından tamamilə asılı olmadığı üçün heç bir
   uyğunsuzluq/boşluq yaranmır. Desktop-da gizlidir. */
.az-top100-mobile-head {
    display: none
}

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

.az-top100-table thead th {
    height: 40px;
    background: #718698 url(img/rate_th.gif) 0 0 repeat-x;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-align: right;
    padding: 0 12px
}

.az-top100-table thead th:first-child {
    text-align: left
}

/* Sətir aşağıdakı td-lərlə (host-stat/hit-stat/ikon) eyni enə malik olsun
   deyə thead th-lərə də eyni width verilir. Bunlar olmadıqda boş "" th
   (ikon sütunu) cədvəlin auto-layout hesablamasında qalan boş sahəni
   özünə götürüb enini şişirdir — mobil görünüşdəki əyriliyin səbəbi budur. */
.az-top100-table thead th:nth-child(2) {
    width: 110px
}

.az-top100-table thead th:nth-child(3) {
    width: 110px
}

.az-top100-table thead th:nth-child(4) {
    width: 60px
}

.az-day-toggle-row td {
    height: 34px;
    background: #eaeef2;
    border-bottom: 1px solid #e3e7e7;
    padding: 0 12px
}

.az-day-toggle {
    text-align: right;
    font-size: 12px;
    color: #97a1a6
}

.az-day-toggle b {
    color: #17232a
}

.az-day-toggle a {
    color: #1672ad;
    text-decoration: none
}

.az-day-toggle a:hover {
    text-decoration: underline
}

.az-top100-table tbody tr {
    background: #fff
}

.az-top100-table tbody tr:last-child td {
    background-image: none
}

.az-top100-table tbody td {
    padding: 10px 8px;
    text-align: center;
    vertical-align: middle;
    /* Sətir ayırıcısı kimi YALNIZ bazadakı dalğalı dotted.gif istifadə
       olunur — .rank-table td-dən gələn CSS "dotted" border-i (düz xətt
       kimi görünürdü) burda ləğv edilir ki, iki xətt bir yerdə görünməsin. */
    background: url(img/dotted.gif) 0 100% repeat-x;
    border-bottom: 0
}

/* VIP sayt sətri — admin paneldən VIP verilmiş sayt Top-100-də sarımtıl
   fonla seçilir (köhnə "vips" effektinin ekvivalenti). Dalğalı ayırıcı
   xətt eyni qalır, sadəcə üzərinə isti-sarı fon əlavə olunur. */
.az-top100-table tbody tr.vip-row td {
    background: url(img/dotted.gif) 0 100% repeat-x, linear-gradient(90deg, rgba(255, 221, 130, .35) 0%, rgba(255, 244, 214, .35) 100%);
}

.az-top100-table tbody tr.vip-row td:first-child {
    border-radius: 6px 0 0 6px
}

.az-top100-table tbody tr.vip-row td:last-child {
    border-radius: 0 6px 6px 0
}

/* /vip səhifəsindəki VIP sayt kartları — eyni isti-sarı VIP görünüşü. */
.vips {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 10px;
    border: 1px solid #f0d999;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 221, 130, .35) 0%, rgba(255, 244, 214, .35) 100%);
    overflow: hidden
}

.vips td {
    vertical-align: middle
}

.vips b {
    color: #7a5b12
}

/* Kateqoriya sıralama cədvəli (.rank-table, sadə dotted border-li) üçün
   də eyni VIP fon effekti — burda dalğalı gif yoxdur, sadəcə isti fon. */
.rank-table tbody tr.vip-row td {
    background: linear-gradient(90deg, rgba(255, 221, 130, .35) 0%, rgba(255, 244, 214, .35) 100%)
}

.az-top100-table tbody td:nth-child(1) {
    width: 46px
}

.az-top100-table tbody td:nth-child(2) {
    text-align: left;
    padding-left: 8px
}

.az-top100-table tbody td:nth-child(3),.az-top100-table tbody td:nth-child(4) {
    width: 110px;
    text-align: right;
    padding-right: 14px
}

.az-top100-table tbody td:nth-child(5) {
    width: 60px
}

.az-top100-table .rank-badge {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #788C9F url(img/num.gif) 0 0 no-repeat;
    color: #fff;
    font-size: 12px;
    font-weight: 700
}

.az-top100-table .rank-badge.vip-badge {
    background: linear-gradient(180deg, #ffd766, #f0a500);
    color: #5b3b00;
    font-size: 13px
}

.az-top100-table .site-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0
}

.az-top100-table .site-favicon {
    width: 16px!important;
    height: 16px!important;
    min-width: 16px;
    max-width: 16px;
    object-fit: contain;
    display: block
}

.az-top100-table .site-cell>div {
    min-width: 0
}

.az-top100-table .site-cell a {
    display: block;
    color: #087c37;
    text-decoration: underline;
    font-size: 14px;
    line-height: 17px
}

.az-top100-table .site-cell small {
    display: block;
    color: #617078;
    font-size: 12px;
    line-height: 15px;
    white-space: normal;
    max-width: 100%;
    overflow: hidden
}

.az-top100-table td:nth-child(3) {
    font-weight: 700;
    color: #10191e;
    font-size: 14px
}

.az-top100-table td:nth-child(4) {
    color: #405766;
    font-size: 14px
}

.az-top100-table .row-stat {
    width: 40px;
    height: 40px;
    border: 1px solid #b9dfbf;
    border-radius: 4px;
    background: #fbfefb;
    display: grid;
    place-items: center;
    margin: auto
}

.az-top100-table .row-stat img {
    width: 19px;
    height: 20px;
    display: block
}

.az-top100-card .pagination,.az-top100-card .nav-pages {
    padding: 10px 12px;
    background: #eef2f4;
    border-top: 0;
    gap: 0;
    justify-content: center
}

.az-top100-card .pagination a,.az-top100-card .pagination span,.az-top100-card .nav-pages a,.az-top100-card .nav-pages span {
    min-width: 40px;
    height: 38px;
    border-radius: 0;
    border: 1px solid #d5dee1;
    background: #f5f7f8;
    color: #304653;
    font-size: 14px
}

.az-top100-card .pagination .active,.az-top100-card .nav-pages .active {
    background: #2fac4a;
    color: #fff;
    border-color: #2fac4a
}

.az-top100-card .pagination a:first-child,.az-top100-card .nav-pages a:first-child {
    border-radius: 4px 0 0 4px
}

.az-top100-card .pagination a:last-child,.az-top100-card .nav-pages a:last-child {
    border-radius: 0 4px 4px 0
}

@media(max-width: 1000px) {
    .az-home-page .az-page {
        grid-template-columns:220px minmax(0,1fr) 220px
    }

    .az-top100-table tbody td:nth-child(3),.az-top100-table tbody td:nth-child(4) {
        width: 80px
    }

    .az-top100-table thead th:nth-child(2),.az-top100-table thead th:nth-child(3) {
        width: 80px
    }
}

@media(max-width: 760px) {
    .az-home-page .az-page {
        display:block
    }

    .az-home-page .az-left {
        display: none
    }

    /* Cədvəl başlıq sırası (Sayt/Hostlar/Hitlər/ikon) tamamilə gizlədilir —
       onun yerinə cədvəldən kənar, sütunlardan asılı olmayan sadə
       "Saytlar" zolağı göstərilir (yuxarıda .az-top100-mobile-head).
       Bu üsulla sütun enləri arasında heç bir uyğunsuzluq/boşluq yarana
       bilməz, çünki başlıq artıq cədvəl sütunlarına bağlı deyil. */
    .az-top100-mobile-head {
        display: block;
        height: 40px;
        line-height: 40px;
        background: #718698 url(img/rate_th.gif) 0 0 repeat-x;
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        padding: 0 12px
    }

    .az-top100-table thead tr.az-top100-head-row {
        display: none
    }

    /* Sətirlərdə "Hostlar" və "Hitlər" məlumat sütunları da gizlədilir —
       yalnız sıra, sayt və (sağda) statistika ikonu qalır. */
    .az-top100-table tbody td:nth-child(3),
    .az-top100-table tbody td:nth-child(4) {
        display: none
    }

    .az-top100-table tbody td:nth-child(5) {
        width: 40px;
        padding: 10px 6px
    }

    .az-top100-table .row-stat {
        width: 26px;
        height: 26px
    }

    .az-top100-table .row-stat img {
        width: 14px;
        height: 15px
    }
}

/* ================= Analytics Dashboard ================= */
/* Mövcud .metric-card/.stats-grid rəng dilinə uyğun — yeni rəng
   sxemi əlavə edilmir, yalnız eyni palitra genişləndirilir. */

.analytics-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px
}

.analytics-range-btn {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #d8dfdf;
    border-radius: 20px;
    background: #fff;
    color: #4a565d;
    font-size: 13px;
    text-decoration: none
}

.analytics-range-btn:hover {
    border-color: #3cae47;
    color: #155c31
}

.analytics-range-btn.active {
    background: #39a944;
    border-color: #39a944;
    color: #fff;
    font-weight: 700
}

.analytics-custom-range {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 12px;
    color: #7b858b
}

.analytics-custom-range input[type="date"] {
    border: 1px solid #d8dfdf;
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 12px
}

.analytics-custom-range button {
    border: 1px solid #3cae47;
    background: #eef8ef;
    color: #155c31;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer
}

.analytics-metrics {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin-bottom: 10px
}

.analytics-metrics-sub {
    margin-bottom: 14px
}

.analytics-metric {
    border: 1px solid #d8dfdf;
    border-radius: 5px;
    background: #fff;
    padding: 14px
}

.analytics-metric.small {
    padding: 10px 14px
}

.analytics-metric-icon {
    font-size: 16px
}

.analytics-metric-icon.online-dot {
    animation: azOnlinePulse 1.8s ease-in-out infinite
}

@keyframes azOnlinePulse {
    0%, 100% { opacity: 1 }
    50% { opacity: .45 }
}

.analytics-metric b {
    display: block;
    font-size: 23px;
    color: #1f343c;
    margin-top: 5px
}

.analytics-metric.small b {
    font-size: 17px;
    margin-top: 2px
}

.analytics-metric small {
    color: #758087;
    font-size: 12px
}

.analytics-card {
    background: #fff;
    border: 1px solid #d8dfdf;
    border-radius: 5px;
    padding: 14px;
    margin-bottom: 14px
}

.analytics-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.analytics-card-head h3 {
    margin: 0;
    font-size: 15px;
    color: #24353d
}

.analytics-online-count {
    font-size: 12px;
    color: #155c31;
    background: #eef8ef;
    border: 1px solid #cdeccf;
    border-radius: 12px;
    padding: 3px 10px;
    font-weight: 700
}

.analytics-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 0
}

.analytics-grid-2 .analytics-card {
    margin-bottom: 14px
}

.analytics-chart-wrap {
    width: 100%;
    overflow: hidden
}

.analytics-svg-chart {
    width: 100%;
    height: 200px;
    display: block
}

.analytics-chart-empty,.analytics-empty {
    color: #92999d;
    font-size: 13px;
    padding: 10px 0;
    text-align: center
}

.analytics-bars {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.analytics-bar-row {
    display: grid;
    grid-template-columns: 90px 1fr 40px;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4a565d
}

.analytics-bar-track {
    height: 7px;
    background: #eef1f1;
    border-radius: 4px;
    overflow: hidden
}

.analytics-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,#39a944,#155c31);
    border-radius: 4px
}

.analytics-bar-row b {
    text-align: right;
    font-size: 12px;
    color: #24353d
}

.analytics-list {
    display: flex;
    flex-direction: column
}

.analytics-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #edf0f0;
    font-size: 13px;
    color: #4a565d
}

.analytics-list-row:last-child {
    border-bottom: 0
}

.analytics-list-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.analytics-list-row b {
    flex: 0 0 auto;
    color: #24353d
}

/* Sayğac kodu bölməsindəki "Kopyala" düyməsi */
.az-copy-btn {
    display: inline-block;
    margin: 6px 0 14px 0;
    padding: 7px 16px;
    border: 1px solid #3cae47;
    background: #39a944;
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer
}

.az-copy-btn:hover { background: #2f8f39 }
.az-copy-btn.copied { background: #155c31; border-color: #155c31 }

@media(max-width: 760px) {
    .analytics-metrics { grid-template-columns: repeat(2,1fr) }
    .analytics-grid-2 { grid-template-columns: 1fr }
    .analytics-bar-row { grid-template-columns: 70px 1fr 34px; font-size: 12px }
    .analytics-custom-range { margin-left: 0; flex-wrap: wrap }
}

/* ================= Xəbərlər (news) ================= */

.news-list-item {
    display: flex;
    gap: 14px;
    align-items: flex-start
}

.news-thumb {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e1e5e5;
    flex: 0 0 auto
}

.news-list-body {
    flex: 1;
    min-width: 0
}

.news-hero-image {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 12px
}

.news-current-image {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0
}

.news-current-image img {
    width: 90px;
    height: 66px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #e1e5e5
}

.news-current-image label {
    font-size: 13px;
    color: #64696e;
    display: flex;
    align-items: center;
    gap: 5px
}

.news-file-label {
    display: inline-block;
    font-size: 13px;
    color: #4a565d;
    margin: 8px 0
}

.news-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0
}

.news-tool-btn {
    border: 1px solid #3cae47;
    background: #eef8ef;
    color: #155c31;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer
}

.news-tool-btn:hover {
    background: #dff2e0
}

.news-tool-hint {
    font-size: 12px;
    color: #92999d
}

.news-admin-link {
    font-size: 12px;
    margin-left: 12px;
    text-decoration: none;
    color: #4a565d;
    font-weight: 600
}

.news-admin-link:hover {
    text-decoration: underline
}

.news-admin-del {
    color: #c3000e
}


/* .error / .info — saytda geniş istifadə olunan mesaj qutuları, əvvəllər
   heç bir yerdə stil verilməmişdi (köhnə silinmiş full.css-də idi). */
.error {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #fdecec;
    border: 1px solid #f3c2c2;
    border-radius: 5px;
    color: #a3121f;
    font-size: 13px
}

.info {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #eef8ef;
    border: 1px solid #cdeccf;
    border-radius: 5px;
    color: #155c31;
    font-size: 13px
}

/* ================= Telegram bildirişləri (Hesab Ayarları) ================= */

.tg-settings-block {
    border-top: 1px solid #edf0f0;
    padding-top: 14px
}

.tg-status-connected {
    background: #eef8ef;
    border: 1px solid #cdeccf;
    border-radius: 5px;
    padding: 10px 14px;
    color: #155c31;
    font-size: 13px;
    margin: 8px 0
}

.tg-connect-hint {
    color: #64696e;
    font-size: 13px;
    margin: 6px 0 10px
}

.tg-connect-btn {
    display: inline-block;
    padding: 9px 18px;
    background: #39a944;
    border: 1px solid #3cae47;
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none
}

.tg-connect-btn:hover {
    background: #2f8f39
}

.tg-disconnect-form {
    margin: 10px 0
}

.tg-disconnect-btn {
    border: 1px solid #f3c2c2;
    background: #fdecec;
    color: #a3121f;
    border-radius: 4px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

.tg-disconnect-btn:hover {
    background: #fbdada
}

.tg-prefs-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px
}

.tg-pref-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #24353d;
    cursor: pointer
}

.tg-pref-row input {
    width: 16px;
    height: 16px;
    cursor: pointer
}

.tg-noscript-save {
    align-self: flex-start;
    margin-top: 4px;
    border: 1px solid #3cae47;
    background: #eef8ef;
    color: #155c31;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer
}

/* ================= İstifadəçi profili (/user/ID) ================= */

.profile-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #d8dfdf;
    border-radius: 5px;
    padding: 18px;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg,#39a944,#155c31);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto
}

.profile-info {
    flex: 1;
    min-width: 180px
}

.profile-info h1 {
    margin: 0 0 6px;
    font-size: 20px;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.profile-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 10px;
    vertical-align: middle
}

.profile-badge-admin {
    background: #fdecec;
    color: #a3121f
}

.profile-badge-mod {
    background: #fff4e0;
    color: #8a5a00
}

.profile-badge-user {
    background: #eef8ef;
    color: #155c31
}

.profile-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #64696e
}

.profile-msg-btn {
    display: inline-block;
    padding: 9px 18px;
    background: #39a944;
    border: 1px solid #3cae47;
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    flex: 0 0 auto
}

.profile-msg-btn:hover {
    background: #2f8f39
}

.profile-sites-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.profile-site-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e3e8e8;
    border-radius: 8px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s
}

.profile-site-row:hover {
    border-color: #39a944;
    box-shadow: 0 2px 8px rgba(20,40,40,.08)
}

.profile-site-body {
    flex: 1;
    min-width: 0
}

.profile-site-url {
    font-weight: 700;
    font-size: 14px;
    color: #155c31
}

.profile-site-about {
    font-size: 12px;
    color: #92999d;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.profile-site-stats {
    flex: 0 0 auto;
    text-align: right;
    font-size: 13px;
    color: #24353d
}

.profile-site-stats small {
    display: block;
    color: #92999d;
    font-size: 11px;
    margin-top: 2px
}

/* ================= Ümumi məzmun kartı (.main) — bütün saytda geniş istifadə olunur ================= */

.main {
    background: #fff;
    border: 1px solid #e3e8e8;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(20,40,40,.04);
}

/* Sadə mətn sahələri (.input, .do_button) — admin/kabinet formalarında geniş istifadə olunur */
.input, .do_button {
    padding: 9px 12px;
    border: 1px solid #d8dfdf;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #24353d;
    background: #fafbfb;
    box-sizing: border-box;
    transition: border-color .15s, background .15s;
}

.input:focus, .do_button:focus {
    outline: none;
    border-color: #39a944;
    background: #fff;
}

textarea.input {
    width: 100%;
    resize: vertical;
}

/* ================= Mesajlarım (kabinet) ================= */

.msg-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.msg-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid #e3e8e8;
    border-radius: 8px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(20,40,40,.04);
    transition: border-color .15s, box-shadow .15s
}

.msg-row:hover {
    border-color: #39a944;
    box-shadow: 0 2px 8px rgba(20,40,40,.08)
}

.msg-row-unread {
    background: #f7fcf7
}

.msg-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg,#39a944,#155c31);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center
}

.msg-avatar-lg {
    width: 52px;
    height: 52px;
    font-size: 20px
}

.msg-row-body {
    flex: 1;
    min-width: 0
}

.msg-row-top {
    display: flex;
    align-items: center;
    gap: 8px
}

.msg-row-subject {
    font-weight: 700;
    font-size: 14px;
    color: #24353d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.msg-row-unread .msg-row-subject {
    color: #155c31
}

.msg-unread-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #39a944
}

.msg-row-meta {
    font-size: 12px;
    color: #92999d;
    margin-top: 2px
}

.msg-detail-card {
    background: #fff;
    border: 1px solid #e3e8e8;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(20,40,40,.04)
}

.msg-detail-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #edf0f0
}

.msg-detail-subject {
    font-size: 17px;
    font-weight: 700;
    color: #24353d
}

.msg-detail-meta {
    font-size: 12px;
    color: #92999d;
    margin-top: 3px
}

.msg-detail-body {
    font-size: 14px;
    line-height: 1.7;
    color: #3a4750;
    white-space: pre-wrap
}

/* ================= Hesab Ayarları — bölmə başlıqları/etiketlər ================= */

.settings-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #24353d;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf0f0
}

.settings-label {
    display: block;
    font-size: 12px;
    color: #64696e;
    margin: 10px 0 4px
}

.settings-label:first-of-type {
    margin-top: 0
}

.settings-submit {
    margin-top: 14px;
    border: 0;
    cursor: pointer
}

/* =========================================================
   AZTOP.NET — modern istifadəçi kabineti / profil / ayarlar
   ========================================================= */
.office-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 14px;padding:26px 28px;border:1px solid #d9e3df;border-radius:14px;background:linear-gradient(135deg,#ffffff 0%,#f3fbf5 58%,#e8f7ed 100%);box-shadow:0 8px 24px rgba(35,76,50,.07)}
.office-hero-glow{position:absolute;right:-65px;top:-85px;width:230px;height:230px;border-radius:50%;background:rgba(64,178,83,.13);filter:blur(2px)}
.office-hero-main{position:relative;z-index:1;display:flex;align-items:center;gap:16px;min-width:0}
.office-avatar{width:66px;height:66px;flex:0 0 66px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#42b957,#15753b);color:#fff;font-size:27px;font-weight:800;box-shadow:0 8px 18px rgba(40,145,65,.24)}
.office-hero-copy h1{margin:4px 0 5px;font-size:27px;line-height:1.12;color:#17252b}
.office-hero-copy p{margin:0;color:#68777d;font-size:14px}
.office-hero-badge{position:relative;z-index:1;display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #cde5d3;border-radius:30px;background:rgba(255,255,255,.75);color:#176b34;white-space:nowrap}
.office-hero-badge small{color:#748078;font-size:11px;margin-left:-3px}
.office-status-dot{width:8px;height:8px;border-radius:50%;background:#35ae4c;box-shadow:0 0 0 4px #e3f6e7}
.office-admin-banner{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;border:1px solid #ecd9dc;border-radius:10px;background:linear-gradient(90deg,#fff8f8,#fff)}
.office-admin-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#fff0f1;color:#b22835;font-size:18px}
.office-admin-banner>div:nth-child(2){flex:1}.office-admin-banner b,.office-admin-banner small{display:block}.office-admin-banner b{font-size:14px;color:#303a3f}.office-admin-banner small{margin-top:2px;color:#7c8589;font-size:12px}.office-admin-banner a{padding:8px 11px;border-radius:7px;background:#b82f3a;color:#fff;text-decoration:none;font-weight:700;font-size:12px}.office-admin-banner a span{margin-left:5px}
.office-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.office-metric{display:flex;align-items:center;gap:10px;min-width:0;padding:13px;border:1px solid #dce4e1;border-radius:11px;background:#fff;text-decoration:none;transition:.16s ease;box-shadow:0 2px 8px rgba(20,50,35,.035)}
.office-metric:hover{transform:translateY(-2px);border-color:#9acfa5;box-shadow:0 8px 18px rgba(20,70,35,.08)}
.metric-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:18px}.metric-icon.green{background:#e9f7ec;color:#2d9c43}.metric-icon.blue{background:#eaf3fb;color:#287bb1}.metric-icon.orange{background:#fff4e5;color:#cc8121}
.office-metric div{min-width:0;flex:1}.office-metric b,.office-metric small{display:block}.office-metric b{font-size:19px;color:#17252b}.office-metric small{font-size:11px;color:#758187;margin-top:1px}.office-metric em{font-style:normal;color:#809088;font-size:10px;white-space:nowrap}
.office-main-card{padding:18px;border:1px solid #dce3e0;border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(20,50,35,.04)}
.office-section-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:13px}.office-section-head h2{margin:3px 0 0;font-size:19px;color:#17252b}.office-section-line{height:1px;flex:1;background:#e5ebe8;margin-bottom:4px}
.office-grid-modern{gap:10px}.office-grid-modern .office-action{position:relative;display:flex;flex-direction:row;align-items:center;gap:11px;min-height:70px;padding:12px;border-radius:10px;background:#fbfcfc;border:1px solid #e1e7e5;transition:.16s ease}.office-grid-modern .office-action:hover{transform:translateY(-2px);background:#fff;border-color:#91c99b;box-shadow:0 8px 18px rgba(25,80,40,.08)}
.office-grid-modern .office-action-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;font-size:17px;color:#258e3a;background:#e9f7ec}.office-grid-modern .office-action-settings .office-action-icon{color:#277db0;background:#eaf4fb}.office-grid-modern .office-action-sites .office-action-icon{color:#8a62b0;background:#f3edfa}.office-grid-modern .office-action-add .office-action-icon{color:#cc8220;background:#fff4e5}
.office-grid-modern .office-action div{min-width:0;flex:1}.office-grid-modern .office-action b{display:block;color:#1b2a30;font-size:14px}.office-grid-modern .office-action small{display:block;color:#7c878c;font-size:11px;margin-top:3px}.office-grid-modern .office-action>strong{font-size:18px;color:#a0aaa9;transition:.16s}.office-grid-modern .office-action:hover>strong{color:#2c9a42;transform:translateX(2px)}
.office-progress-modern{margin-top:14px;padding:13px;border:1px solid #e4ebe7;border-radius:10px;background:#f8fbf9}.office-progress-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.office-progress-top b,.office-progress-top small{display:block}.office-progress-top b{font-size:12px;color:#33413f}.office-progress-top small{font-size:10px;color:#85908e;margin-top:2px}.office-progress-top>strong{font-size:13px;color:#299544}.office-progress-track{height:8px;border-radius:10px;overflow:hidden;background:#e4ece7}.office-progress-track span{display:block;height:100%;min-width:3px;border-radius:10px;background:linear-gradient(90deg,#37a84b,#7acb78)}
.office-bottom-row{display:flex;align-items:center;gap:10px;margin-top:12px}.office-tip{display:flex;align-items:center;gap:10px;flex:1;padding:11px 13px;border:1px solid #e2e8e5;border-radius:10px;background:#fbfcfb}.office-tip>span{font-size:20px}.office-tip b{font-size:12px;color:#34403f}.office-tip p{margin:2px 0 0;color:#7a8589;font-size:11px}.office-logout-modern{padding:10px 13px;border:1px solid #e0d6d7;border-radius:8px;background:#fff8f8;color:#a33a43;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}.office-logout-modern:hover{background:#fff0f1}

.settings-hero{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:19px 20px;border:1px solid #dce4e1;border-radius:12px;background:linear-gradient(135deg,#fff,#f2faf4);box-shadow:0 3px 12px rgba(20,50,35,.04)}
.settings-hero-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:#e8f6eb;color:#2d9842;font-size:22px}.settings-hero h1{margin:3px 0 3px;font-size:24px;color:#18272d}.settings-hero p{margin:0;color:#748087;font-size:12px}
.settings-alert{margin:0 0 10px;padding:10px 13px;border-radius:8px;font-size:12px;font-weight:700}.settings-alert.success{border:1px solid #cde7d2;background:#f0fbf2;color:#277b36}.settings-alert.error{border:1px solid #efd0d0;background:#fff4f4;color:#a3313a}
.settings-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;align-items:start}.settings-main-column{min-width:0}.settings-side-column{min-width:0}
.settings-card{padding:17px;margin-bottom:12px;border:1px solid #dce4e1;border-radius:11px;background:#fff;box-shadow:0 3px 12px rgba(20,50,35,.035)}
.settings-card-head{display:flex;align-items:center;gap:11px;margin-bottom:15px}.settings-card-head>div{min-width:0;flex:1}.settings-card-head h2{margin:0;color:#1b2a30;font-size:16px}.settings-card-head p{margin:3px 0 0;color:#7a858b;font-size:11px}.settings-card-icon{width:40px;height:40px;flex:0 0 40px;border-radius:11px;display:grid;place-items:center;font-size:17px}.settings-card-icon.green{background:#e9f7ec;color:#2b9942}.settings-card-icon.blue{background:#eaf4fb;color:#2b7cae}.settings-card-icon.tg{background:#eaf5ff;color:#1985c4}.settings-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}.settings-form-grid label{display:block}.settings-form-grid label>span{display:block;margin:0 0 5px;color:#526067;font-size:11px;font-weight:700}.settings-form-grid .input{width:100%;height:39px;box-sizing:border-box;border:1px solid #d6dfdc;border-radius:7px;background:#fbfcfc;padding:0 10px;outline:none}.settings-form-grid .input:focus{border-color:#6abb78;box-shadow:0 0 0 3px rgba(77,177,91,.1);background:#fff}.settings-form-action{display:flex;justify-content:flex-end}.settings-submit{min-height:39px;border-radius:7px!important}.settings-submit span{margin-left:7px}.settings-mail-form{grid-template-columns:1fr 1fr auto}
.settings-security-card{padding:18px;border:1px solid #d9e8dc;border-radius:11px;background:linear-gradient(145deg,#f3fbf4,#fff);text-align:center}.security-ring{width:48px;height:48px;margin:0 auto 9px;border-radius:50%;display:grid;place-items:center;background:#e2f4e5;color:#2c9b42;font-size:22px;font-weight:800;box-shadow:0 0 0 7px #f0faf1}.settings-security-card h3{margin:12px 0 4px;font-size:15px;color:#24332f}.settings-security-card p{margin:0 0 13px;color:#7a8682;font-size:11px;line-height:1.45}.security-item{padding:8px 0;border-top:1px solid #deebe1;color:#53705b;font-size:11px;text-align:left}.security-item span{color:#42ad51;margin-right:6px}
.telegram-card{position:relative}.tg-pill{padding:5px 8px;border-radius:20px;background:#eaf7ec;color:#2c9140;font-size:9px;font-weight:800;white-space:nowrap}.tg-connected-box{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #dce8e2;border-radius:9px;background:#f8fbf9}.tg-connected-avatar,.tg-big-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#e9f5ff;color:#1688c9;font-size:18px}.tg-connected-box>div:nth-child(2){flex:1}.tg-connected-box b,.tg-connected-box small{display:block}.tg-connected-box b{font-size:13px;color:#26363c}.tg-connected-box small{font-size:10px;color:#7c888d;margin-top:2px}.tg-connected-box form{margin-left:auto}.tg-disconnect-btn{border:1px solid #e2d4d5;border-radius:7px;background:#fff;color:#a23840;padding:7px 10px;font-size:11px;font-weight:700;cursor:pointer}.tg-pref-title{margin:14px 0 8px;font-size:11px;font-weight:800;color:#536066}.tg-prefs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tg-pref-card{position:relative;display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #e0e7e4;border-radius:9px;background:#fbfcfc;cursor:pointer;transition:.15s}.tg-pref-card:hover{border-color:#9bcba4;background:#fff}.tg-pref-card input{position:absolute;opacity:0;pointer-events:none}.tg-pref-check{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#eef5f0;font-size:15px}.tg-pref-card>span:nth-of-type(2){flex:1}.tg-pref-card b,.tg-pref-card small{display:block}.tg-pref-card b{font-size:11px;color:#344148}.tg-pref-card small{font-size:9px;color:#8a9498;margin-top:2px}.tg-pref-card>i{font-style:normal;color:#b6bfbb;font-size:13px}.tg-pref-card input:checked~i{color:#32a648}.tg-pref-card:has(input:checked){border-color:#a8d4af;background:#f3faf4}.tg-connect-empty{display:flex;align-items:center;gap:11px;padding:13px;border:1px dashed #cbded2;border-radius:9px;background:#f8fcf9}.tg-connect-empty>div:nth-child(2){flex:1}.tg-connect-empty b{display:block;color:#2c393f;font-size:13px}.tg-connect-empty p{margin:3px 0 0;color:#7a878b;font-size:10px}.tg-connect-btn{padding:9px 11px;border-radius:7px;background:#238ac4;color:#fff;text-decoration:none;font-size:11px;font-weight:700;white-space:nowrap}.tg-connect-btn span{margin-left:5px}.settings-back{margin:4px 0 16px}.settings-back a{color:#2676a7;text-decoration:none;font-size:12px;font-weight:700}

.profile-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;margin:0 0 10px;padding:24px;border:1px solid #d9e4de;border-radius:14px;background:linear-gradient(135deg,#fff 0%,#f2faf4 62%,#e9f7ed 100%);box-shadow:0 5px 18px rgba(20,60,35,.05)}.profile-cover-glow{position:absolute;right:-70px;top:-80px;width:210px;height:210px;border-radius:50%;background:rgba(60,178,83,.13)}.profile-avatar-xl{position:relative;z-index:1;width:78px;height:78px;flex:0 0 78px;border-radius:24px;background:linear-gradient(145deg,#42b957,#176d39);box-shadow:0 9px 20px rgba(38,139,62,.22);font-size:31px}.profile-hero .profile-info{position:relative;z-index:1;flex:1;min-width:0}.profile-hero .profile-info h1{margin:4px 0 6px;font-size:24px;color:#18272d}.profile-hero .profile-meta{gap:12px;font-size:11px;color:#6e7c82}.profile-hero .profile-msg-btn{position:relative;z-index:1;padding:10px 13px;border-radius:8px;box-shadow:0 5px 12px rgba(40,154,65,.18)}.profile-msg-btn span{margin-left:6px}.profile-stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}.profile-stat-strip>div{padding:12px 14px;border:1px solid #dfe6e3;border-radius:9px;background:#fff}.profile-stat-strip b,.profile-stat-strip small{display:block}.profile-stat-strip b{font-size:16px;color:#24343a}.profile-stat-strip small{font-size:10px;color:#7c888c;margin-top:2px}.profile-message-card{border-radius:11px}.profile-message-fields{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-bottom:9px}.profile-message-fields .input{width:100%;box-sizing:border-box}.profile-message-fields textarea{min-height:80px;resize:vertical}.profile-sites-card{border-radius:11px}.profile-section-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid #e4e9e7}.profile-section-head h2{margin:3px 0 0;font-size:18px;color:#1d2c32}.profile-section-head>strong{font-size:11px;color:#7b878b}.profile-site-row{border-radius:9px}.profile-site-row:hover{transform:translateY(-1px)}

@media(max-width:800px){.office-hero{align-items:flex-start;flex-direction:column}.office-hero-badge{position:absolute;right:14px;top:14px}.office-hero-copy{padding-right:80px}.settings-layout{grid-template-columns:1fr}.settings-security-card{display:none}.settings-form-grid,.settings-mail-form{grid-template-columns:1fr}.settings-form-action{justify-content:flex-start}.tg-prefs-grid{grid-template-columns:1fr}.profile-hero{align-items:flex-start;flex-wrap:wrap}.profile-hero .profile-msg-btn{margin-left:94px;margin-top:-5px}.profile-message-fields{grid-template-columns:1fr}.office-grid-modern{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.office-metrics,.profile-stat-strip{grid-template-columns:1fr}.office-grid-modern{grid-template-columns:1fr}.office-bottom-row{align-items:stretch;flex-direction:column}.office-logout-modern{text-align:center}.office-hero{padding:18px}.office-avatar{width:54px;height:54px;flex-basis:54px;border-radius:16px;font-size:23px}.office-hero-copy h1{font-size:21px}.office-hero-copy p{font-size:12px}.office-hero-badge{position:static;margin-left:70px;margin-top:-6px}.office-hero-copy{padding-right:0}.office-main-card{padding:13px}.office-tip{align-items:flex-start}.settings-hero{padding:15px}.settings-hero h1{font-size:21px}.tg-connect-empty{align-items:flex-start;flex-wrap:wrap}.tg-connect-btn{margin-left:51px}.profile-hero{padding:18px}.profile-avatar-xl{width:64px;height:64px;flex-basis:64px;border-radius:19px;font-size:25px}.profile-hero .profile-info h1{font-size:20px}.profile-hero .profile-msg-btn{margin-left:0;width:100%;text-align:center}.profile-meta{gap:7px!important}.profile-stat-strip{gap:7px}.profile-stat-strip>div{display:flex;align-items:center;justify-content:space-between}.profile-stat-strip small{margin:0}.profile-site-row{align-items:flex-start}.profile-site-stats{margin-left:auto}.profile-section-head h2{font-size:16px}}