/* onlyindex.io — components beyond the landing template (same tokens, same 1rem = 10 design px) */
.page{padding:2.4rem 0 4rem}
.h2{font:900 3.9rem/4.4rem var(--head);letter-spacing:-.02em;color:var(--navy)}
.h3{font:800 2.2rem/2.8rem var(--head);color:var(--navy);margin:3rem 0 1.2rem}
.muted{color:var(--muted)} .small{font-size:1.35rem} .lead{font-size:1.9rem;color:#33425f;margin:1rem 0 2rem;max-width:90rem}
.crumbs{font-size:1.4rem;color:var(--muted);margin-bottom:1rem}
.crumbs a:hover{color:var(--blue)} .crumbs .cur{color:var(--navy)}
.sublinks{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0}
.sublinks a{padding:.5rem 1.4rem;border-radius:99rem;background:var(--sky);font-size:1.4rem;color:#0b6db3}
.empty{padding:6rem 2rem;text-align:center;color:var(--muted);font-size:1.7rem;grid-column:1/-1}
.notice{display:flex;gap:1rem;align-items:center;padding:1.2rem 1.6rem;border-radius:1.2rem;margin:1rem 0 2rem;font-size:1.5rem}
.notice i{font-size:2.2rem} .notice.ok{background:#e6f8ef;color:#136c3a} .notice.warn{background:#fff4e5;color:#8a4b00}
.notice a{text-decoration:underline}

/* filters (page version) */
.filters label.chip{cursor:pointer;position:relative}
.filters select{appearance:none;border:0;background:transparent;font:inherit;color:inherit;flex:1;min-width:0;cursor:pointer;padding-right:1.6rem}
.filters label.chip::after{content:"\e136";font-family:"Phosphor";position:absolute;right:1.4rem;font-size:1.4rem;color:#4a5a78;pointer-events:none}
.filters .chip-check::after,.filters .chip-go::after,.filters .chip-reset::after,.filters .chip-sort::after{content:none}
.chip-check input{accent-color:var(--blue);width:1.6rem;height:1.6rem}
.chip-go{background:var(--grad);color:#fff;font-weight:700;width:auto;padding:0 2.4rem}
.chip-reset{width:auto;color:var(--muted)}
.filters-page{height:auto;flex-wrap:wrap;padding:1.4rem;gap:1rem;margin:1.6rem 0 2rem}
.filters-page .chip{width:auto;flex:0 1 auto;min-width:14rem}
.search-sm{width:100%;height:5.4rem;margin:0 0 .4rem;border-width:.2rem;box-shadow:none}
.search-sm>i{font-size:2.4rem} .search-sm button{height:4.2rem;width:11rem;font-size:1.5rem}
.cards-list{margin-top:0} .cards-3{grid-template-columns:repeat(3,1fr)}
.ph-wrap{display:block} .ph-empty{width:100%;height:100%;display:grid;place-items:center;background:var(--sky);color:var(--blue);font-size:7rem}
.free-badge{position:absolute;top:1rem;left:.8rem;height:2.8rem;display:flex;align-items:center;padding:0 1.1rem;background:#12b76a;color:#fff;border-radius:.8rem;font-size:1.3rem;font-weight:600}
.card-b h3 .of-ico{margin-left:auto;color:var(--muted);font-size:1.9rem} .card-b h3 .of-ico:hover{color:var(--blue)}
.card-b h3 a:hover{color:var(--blue)} .tags a span:hover{background:#c9e8fb}
.card-sum{margin:1rem 0 0 .4rem;font-size:1.36rem;line-height:1.9rem;color:var(--muted)}
.pager{display:flex;justify-content:center;align-items:center;gap:2rem;margin:3rem 0 1rem;font-size:1.6rem;color:var(--muted)}
.pager a{padding:1rem 2rem;border-radius:99rem;background:var(--sky);color:var(--blue-d);font-weight:600}
.ad-slot{margin:3rem 0;text-align:center}

/* tiles (categories / countries) */
.tile-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6rem;margin:2rem 0 3rem}
.tile-grid-sm{grid-template-columns:repeat(6,1fr)}
.tile{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:2rem 1rem;background:#fff;border:1px solid var(--line);border-radius:1.5rem;text-align:center;transition:transform .15s,box-shadow .15s}
.tile:hover{transform:translateY(-.3rem);box-shadow:0 .8rem 2rem rgba(14,165,243,.18)}
.tile-ico{width:6rem;height:6rem;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#e4f5fe,#d2ecfc);font-size:2.8rem;color:var(--blue)}
.tile b{font-size:1.6rem;color:var(--navy)} .tile small{font-size:1.3rem;color:var(--muted)}

/* profile */
.p-head{margin:1rem 0 2rem;border-radius:2rem;overflow:hidden;background:var(--sky);position:relative}
.p-head::before{content:"";display:block;height:16rem;background:var(--hdr,linear-gradient(120deg,#d9effd,#e8f4fd)) center/cover}
/* no real header: blur + enlarge the avatar so it reads as a banner instead of a stretched face */
.p-head-blur::before{filter:blur(14px) saturate(1.15) brightness(.92);transform:scale(1.12)}
.p-head{isolation:isolate}
/* only the avatar overlaps the banner (negative margin on it alone); name/tags/actions always
   start below the banner edge, so long names or wrapped tags never climb into the image */
.p-head-in{display:flex;align-items:flex-start;gap:2.4rem;padding:0 3rem 2.4rem;flex-wrap:wrap}
.p-avatar{width:14rem;height:14rem;flex:none;margin-top:-6rem;border-radius:50%;object-fit:cover;border:.5rem solid #fff;background:#fff;box-shadow:0 .4rem 1.6rem rgba(40,110,170,.2);position:relative;z-index:1}
.p-id,.p-actions{padding-top:1.4rem}
.p-avatar-empty{display:grid;place-items:center;font-size:6rem;color:var(--blue)}
.p-id{flex:1;min-width:24rem}
.p-id h1{font:900 3.6rem/4rem var(--head);letter-spacing:-.02em;color:var(--navy);margin:0;white-space:normal;text-shadow:none;display:flex;align-items:center;gap:1rem}
.p-id h1 i{font-size:3rem;color:var(--blue)}
.p-id .handle{font-size:1.7rem;margin:.4rem 0 1rem} .p-id .handle a{color:var(--blue-d)} .p-id .handle i{font-size:1.5rem;margin-right:.3rem}
.p-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.btn{padding:0 2.4rem;height:4.6rem;white-space:nowrap} .btn.inline{display:inline-flex}
.btn-of{background:linear-gradient(180deg,#19b0f8,#0a9af0)} .btn-of i{margin-left:.6rem}
.btn-ghost{background:#fff;color:var(--blue-d);border:.2rem solid var(--blue);box-shadow:none}
.btn-danger{background:#e5484d;box-shadow:none} .btn-sm{height:3.2rem;padding:0 1.4rem;font-size:1.3rem;display:inline-flex}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}
.p-grid{display:grid;grid-template-columns:1fr 36rem;gap:2.4rem;align-items:start}
.box{background:#fff;border:1px solid var(--line);border-radius:1.6rem;padding:2.2rem 2.4rem;margin-bottom:2rem;box-shadow:0 .4rem 1.8rem rgba(40,110,170,.06)}
.box h2{font:800 2.1rem/2.6rem var(--head);color:var(--navy);margin-bottom:1.2rem}
.box h3{font:700 1.6rem/2.2rem var(--head);color:var(--navy);margin:1.8rem 0 .8rem}
.summary{font-size:1.75rem;line-height:2.7rem;color:#22304d}
.bio{white-space:pre-wrap;font-size:1.6rem;line-height:2.5rem;color:#33425f;word-break:break-word}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.statgrid div{background:var(--sky);border-radius:1.2rem;padding:1.4rem;text-align:center}
.statgrid b{display:block;font:800 2.4rem/2.8rem var(--head);color:var(--navy)} .statgrid span{font-size:1.3rem;color:var(--muted)}
.growth{margin-top:1.4rem;font-size:1.5rem;color:#33425f}
.price-box .price{font:900 4.4rem/4.8rem var(--head);color:var(--blue-d)} .price-box .price small{font-size:1.8rem;color:var(--muted);margin-left:.4rem}
.bundles li,.events li{font-size:1.45rem;line-height:2.3rem;color:#33425f;padding-left:1.4rem;position:relative}
.bundles li::before,.events li::before{content:"•";position:absolute;left:0;color:var(--blue)}
.price-box .btn{margin-top:1.8rem}
.socials{display:flex;flex-wrap:wrap;gap:.8rem}
.socials a{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.4rem;border-radius:99rem;background:var(--sky);font-size:1.4rem;color:#0b6db3}
.small-links{display:flex;flex-direction:column;gap:.9rem} .small-links a{display:flex;gap:.8rem;align-items:center;font-size:1.45rem;color:var(--muted)} .small-links a:hover{color:var(--blue)}
.faq details{border-top:1px solid var(--line);padding:1rem 0} .faq summary{cursor:pointer;font-weight:600;font-size:1.6rem;color:var(--navy)} .faq p{margin-top:.8rem;font-size:1.5rem;color:#33425f;line-height:2.3rem}
.similar{margin-top:3rem}
.cta-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:3rem 0 1rem}
.cta-box{display:flex;align-items:center;gap:1.6rem;padding:2rem 2.4rem;background:var(--sky);border-radius:1.6rem;font-size:1.5rem;color:#33425f;margin:1.6rem 0}
.cta-box>i{font-size:3.6rem;color:var(--blue)} .cta-box div{flex:1} .cta-box b{display:block;color:var(--navy);font-size:1.7rem}

/* prose pages & forms */
.prose{max-width:96rem} .prose h2{font:800 2.3rem/3rem var(--head);color:var(--navy);margin:3rem 0 1rem} .prose p,.prose li{font-size:1.6rem;line-height:2.6rem;color:#33425f;margin-bottom:1rem}
.prose ul{padding-left:2rem} .prose ul li{list-style:disc} .prose a{color:var(--blue-d);text-decoration:underline} .prose .btn{text-decoration:none}
.linklist li{margin:.6rem 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin:2rem 0}
.steps div{background:#fff;border:1px solid var(--line);border-radius:1.6rem;padding:2rem}
.steps span{width:4.4rem;height:4.4rem;border-radius:50%;display:grid;place-items:center;background:var(--sky-2);font:800 2.2rem var(--head);color:var(--blue-d);margin-bottom:1rem}
.steps b{display:block;font-size:1.7rem;color:var(--navy);margin-bottom:.4rem} .steps p{font-size:1.45rem;line-height:2.2rem;margin:0}
.form{display:flex;flex-direction:column;gap:1.4rem;margin:2rem 0}
.form label{display:flex;flex-direction:column;gap:.5rem;font-size:1.45rem;font-weight:600;color:var(--navy)}
.form input,.form textarea,.form select{border:.15rem solid var(--line);border-radius:1rem;padding:1.1rem 1.4rem;font:400 1.6rem var(--body);background:#fff;color:var(--ink)}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--blue);box-shadow:0 0 0 .4rem rgba(14,165,243,.12)}
.form .check{flex-direction:row;align-items:center;gap:.8rem;font-weight:400} .form .check input{accent-color:var(--blue);width:1.7rem;height:1.7rem}
.form fieldset{border:.15rem solid var(--line);border-radius:1rem;padding:1.2rem 1.6rem;display:flex;flex-wrap:wrap;gap:.6rem 1.8rem} .form legend{font-weight:600;font-size:1.4rem;padding:0 .6rem}
.form .btn{align-self:flex-start} .inline-form{flex-direction:row;align-items:flex-end;flex-wrap:wrap}
.auth{display:grid;place-items:center;min-height:50vh} .auth-box{width:44rem;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:2rem;padding:3rem;box-shadow:0 .8rem 2.4rem rgba(40,110,170,.08)}
.auth-box .btn{align-self:stretch}
code{background:var(--sky);padding:.2rem .6rem;border-radius:.5rem;font-size:1.35rem} code.copy{font-size:1.5rem;padding:.8rem 1.2rem;display:inline-block;user-select:all}
.plans{width:100%;border-collapse:collapse;margin:2rem 0;font-size:1.45rem} .plans th,.plans td{padding:1rem 1.2rem;border-bottom:1px solid var(--line);text-align:left} .plans th{background:var(--sky);color:var(--navy)} .plans th small{display:block;font-weight:400;color:var(--muted)}

/* panels (account + admin) */
.panel{display:grid;grid-template-columns:24rem 1fr;gap:3rem;align-items:start}
.panel-nav{position:sticky;top:8rem;background:#fff;border:1px solid var(--line);border-radius:1.6rem;padding:1.4rem;display:flex;flex-direction:column;gap:.3rem}
.panel-user{display:flex;flex-direction:column;padding:1rem 1.2rem 1.4rem;font-size:1.4rem;font-weight:600;color:var(--navy);word-break:break-all;border-bottom:1px solid var(--line);margin-bottom:.6rem}
.panel-user i{font-size:3rem;color:var(--blue);margin-bottom:.4rem} .panel-user small{font-weight:400;color:var(--muted)}
.panel-nav a,.panel-nav button{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;border-radius:1rem;font-size:1.5rem;color:var(--navy);width:100%;text-align:left}
.panel-nav a:hover,.panel-nav button:hover{background:var(--sky)} .panel-nav a.on{background:var(--sky);color:var(--blue-d);font-weight:600} .panel-nav i{font-size:2rem;color:var(--blue)}
.panel-body .h2{margin-bottom:1.6rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin:1.6rem 0 2rem} .kpis-6{grid-template-columns:repeat(6,1fr)}
.kpis div{background:#fff;border:1px solid var(--line);border-radius:1.4rem;padding:1.6rem;text-align:center}
.kpis b{display:block;font:800 2.6rem/3rem var(--head);color:var(--navy)} .kpis b small{font-size:1.3rem;color:var(--muted);font-weight:400} .kpis span{font-size:1.3rem;color:var(--muted)}
.table{width:100%;border-collapse:collapse;font-size:1.5rem;margin:1rem 0} .table th,.table td{padding:.9rem 1rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .table th{color:var(--muted);font-weight:600;font-size:1.3rem;text-transform:uppercase;letter-spacing:.04em}
.table.small{font-size:1.35rem} .table.small td,.table.small th{padding:.6rem .8rem} .table select{font:inherit;border:1px solid var(--line);border-radius:.6rem;padding:.3rem}
.pill{display:inline-block;padding:.2rem .9rem;border-radius:99rem;font-size:1.2rem;font-weight:600;background:var(--sky);color:#0b6db3}
.pill.verified,.pill.done,.pill.active{background:#e6f8ef;color:#136c3a} .pill.pending,.pill.open{background:#fff4e5;color:#8a4b00} .pill.rejected,.pill.dead,.pill.removed,.pill.error{background:#fdecec;color:#a32d31}
.pill.ai{background:#efe6ff;color:#5b21b6} .pill.search{background:#e6f8ef;color:#136c3a} .pill.seo{background:#fff4e5;color:#8a4b00}
.claim-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem;font-size:1.6rem}
.admin-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.live{font:500 1.4rem var(--body);color:#136c3a;margin-left:1rem} .live i{font-size:1rem;margin-right:.4rem;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.range{display:flex;gap:.4rem;background:var(--sky);padding:.4rem;border-radius:99rem} .range a{padding:.6rem 1.4rem;border-radius:99rem;font-size:1.4rem;font-weight:600;color:var(--navy)} .range a.on{background:#fff;color:var(--blue-d)}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.toplist{display:flex;flex-direction:column;gap:.5rem}
.toplist li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;position:relative;font-size:1.4rem;padding:.4rem .6rem;border-radius:.6rem;overflow:hidden}
.toplist li i{position:absolute;left:0;top:0;bottom:0;background:var(--sky);z-index:0;border-radius:.6rem}
.toplist .lbl,.toplist b{position:relative;z-index:1} .toplist .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--navy)} .toplist b{color:var(--navy)}
body.admin .wrap{width:190rem}

/* footer */
.foot-big{padding-top:4rem;border-top:1px solid var(--line);margin-top:4rem}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem;margin-bottom:3rem}
.foot-cols h4{font:800 1.4rem var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin:0 0 1rem} .foot-cols h4+a{margin-top:0} .foot-cols a+h4{margin-top:2.4rem}
.foot-cols a{display:block;font-size:1.4rem;line-height:2.5rem;color:#33425f} .foot-cols a:hover{color:var(--blue)} .foot-cols a.more{color:var(--blue-d);font-weight:600}
.foot-legal{border-top:1px solid var(--line);padding-top:1.6rem;font-size:1.35rem;color:#33425f} .foot-legal p{margin:.4rem 0} .foot-legal b{color:var(--navy)} .foot-legal a:hover{color:var(--blue)}

@media (max-width:1100px){
  .tile-grid{grid-template-columns:repeat(3,1fr)} .tile-grid-sm{grid-template-columns:repeat(3,1fr)}
  .p-grid{grid-template-columns:1fr} .cols-2{grid-template-columns:1fr} .kpis,.kpis-6{grid-template-columns:repeat(2,1fr)}
  .panel{grid-template-columns:1fr} .panel-nav{position:static;flex-direction:row;flex-wrap:wrap} .panel-user{width:100%;border:0}
  .foot-cols{grid-template-columns:repeat(2,1fr)} .cta-row{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .cards-3{grid-template-columns:repeat(2,1fr)}
  .filters-page .chip{flex:1 1 40%} body.admin .wrap{width:auto} .table{display:block;overflow-x:auto}
}
@media (max-width:620px){
  .tile-grid,.tile-grid-sm{grid-template-columns:repeat(2,1fr)} .h2{font-size:3rem;line-height:3.4rem} .statgrid{grid-template-columns:repeat(2,1fr)}
  .p-head-in{padding:0 1.6rem 1.6rem} .p-id h1{font-size:2.8rem;line-height:3.2rem} .foot-cols{grid-template-columns:1fr} .cards-3{grid-template-columns:1fr}
}