/* Dark theme — purple + pink accents on the base dark palette from styles.css, white logo tiles so provider logos stay visible. */

.language-gate,.detail-modal{position:fixed;inset:0;z-index:1000;background:rgba(8,5,14,.92);display:grid;place-items:center;padding:24px}
.language-gate>div,.detail-modal>div{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:28px;display:grid;gap:14px;text-align:center;color:var(--text)}
.language-gate button,.sponsor-panel button{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:#fff;font-weight:800;cursor:pointer}
.language-gate button:hover,.sponsor-panel button:hover{border-color:var(--green)}
.detail-modal>div{position:relative}
.modal-close{position:absolute;right:14px;top:10px;border:0;background:none;color:var(--text);font-size:28px;cursor:pointer}
.detail-modal a{color:var(--green)}

.sponsor-panel{margin:28px 0;padding:24px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,#1c1130,#120c1c)}
.sponsor-panel>span{color:var(--violet);font:700 12px 'Space Mono'}
.sponsor-panel div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
@media(max-width:520px){.sponsor-panel div{grid-template-columns:1fr}}

.brand-mark{overflow:hidden;padding:0}
.brand-mark img{width:100%;height:100%;display:block;object-fit:cover}
.become-top{display:block;width:max-content;margin:14px 0 22px;padding:12px 18px;background:linear-gradient(135deg,#b16cff,#f45fc0);color:#fff;border:0;border-radius:12px;box-shadow:0 8px 24px #b16cff33;font-weight:800;text-decoration:none}

/* Logo tiles stay solid white in every context so a provider's own logo (often transparent-background) reads clearly */
.provider-logo img,.directory-card .logo img,.detail-modal .logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.directory-card .logo,.provider-detail header .logo{background:#fff;color:#7c3aed;overflow:hidden}

.usage-card{margin:16px 0 28px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.usage-card span{color:var(--violet);font:700 10px 'Space Mono'}
.usage-card strong{font-size:13px;text-align:right;color:var(--text)}
.usage-card.is-pro{border-color:var(--green)}

/* Home action tiles */
.main-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:25px 0 28px}
.main-actions button{min-height:150px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:20px;color:var(--text);transition:.15s;cursor:pointer}
.main-actions button:hover{border-color:var(--green);transform:translateY(-2px)}
.main-actions i{display:grid;place-items:center;width:44px;height:44px;background:linear-gradient(135deg,#b16cff33,#f45fc033);color:var(--green);border:1px solid var(--line);border-radius:14px;font:700 22px Space Mono;font-style:normal}
.main-actions span{display:block;margin-top:18px}
.main-actions b,.main-actions small{display:block}
.main-actions b{font-size:15px}
.main-actions small{font-size:9px;color:var(--muted);margin-top:5px}
.main-actions em{float:right;font-style:normal;font-weight:900;color:var(--muted)}

/* Provider directory list */
.directory-list{display:grid;gap:12px;margin-top:14px}
.directory-card{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;color:var(--text);cursor:pointer}
.directory-card .logo{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font:800 18px Space Mono}
.directory-card h3{font-size:14px;margin:0 0 5px}
.directory-card p{font-size:9px;color:var(--muted);margin:0}
.directory-card .rating{text-align:right}
.directory-card .rating strong{display:block;color:var(--violet);font:700 13px Space Mono}
.directory-card .rating small{font-size:8px;color:var(--muted)}

/* "Large" tier providers teased occasionally into free/paid browsing to drive upgrades */
.elite-badge{display:inline-block;margin-left:7px;padding:3px 8px;border-radius:20px;background:linear-gradient(135deg,#ffd76a,#ff9ecb);color:#2a1300;font:800 8px Space Mono;letter-spacing:.03em;vertical-align:middle}
.directory-card.elite,.result-card.elite{border-color:#ffd76a99;box-shadow:0 0 0 1px #ffd76a33,0 10px 30px #ffb54c1f}
.result-card.elite .elite-badge{margin:8px 0 0;display:inline-block}

.locked-card{cursor:pointer;text-align:center;padding:26px 20px;border-radius:18px;background:linear-gradient(135deg,#2a1240,#1a1030);border:1px solid #6b3fa0;box-shadow:0 8px 24px #b16cff1a}
.locked-card b{display:block;font-size:15px;margin-bottom:6px;background:linear-gradient(135deg,#d9a8ff,#ff9edb);-webkit-background-clip:text;background-clip:text;color:transparent}
.locked-card p{margin:0 0 12px;font-size:11px;color:var(--muted)}
.locked-card span{display:inline-block;padding:9px 16px;border-radius:10px;background:linear-gradient(135deg,#b16cff,#f45fc0);color:#fff;font-weight:800;font-size:11px}

.country-grid,.platform-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.country-grid[hidden],.platform-grid[hidden]{display:none}
.country-grid button,.platform-grid button{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--line);background:var(--panel);border-radius:16px;color:var(--text);cursor:pointer;transition:.15s;text-align:left}
.country-grid button:hover,.platform-grid button:hover{border-color:var(--green);transform:translateY(-2px)}
.country-grid .flag,.platform-grid .flag{width:40px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.country-grid b,.platform-grid b{display:block;font-size:13px}
.country-grid small,.platform-grid small{display:block;color:var(--muted);font-size:9px;margin-top:3px}
.icon-server{width:26px;height:26px}
.back-link{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--green);font-weight:700;font-size:12px;cursor:pointer;padding:0;margin:4px 0 16px}
@media(max-width:420px){.country-grid,.platform-grid{grid-template-columns:1fr}}

.model-badge{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:20px;font:800 8px Space Mono;letter-spacing:.02em;vertical-align:middle}
.model-badge.model-owned{background:#1c3a2a;color:#4ade80}
.model-badge.model-reselling{background:#3a2a1c;color:#f59e0b}

.scam-list{display:grid;gap:12px;margin-top:16px}
.scam-card{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid #7a2a2a;background:#1f1013;border-radius:16px}
.scam-card .scam-icon{display:flex;color:#f87171;flex-shrink:0;width:26px;height:26px;margin-top:2px}
.scam-card .scam-icon svg{width:100%;height:100%}
.scam-card h3{margin:0 0 4px;font-size:14px;color:#fff}
.scam-card .scam-website{margin:0 0 6px;font-size:11px;color:#f87171;font-weight:700}
.scam-card .scam-reason{margin:0 0 6px;font-size:11px;color:var(--muted);line-height:1.5}
.scam-card small{color:#7a5a5a;font-size:9px}
.scam-menu-item i{color:#f87171!important}

/* Custom icon set — replaces platform emoji everywhere in the mini app */
.icon-star{width:12px;height:12px;vertical-align:-1px;display:inline-block;flex-shrink:0}
.icon-lock{width:16px;height:16px;vertical-align:-3px;display:inline-block;flex-shrink:0}
.icon-globe{width:22px;height:22px;display:block}
.icon-medal{width:18px;height:18px;vertical-align:-4px;display:inline-block;flex-shrink:0}
.icon-flag{width:36px;height:24px;border-radius:5px;display:block;box-shadow:0 0 0 1px #ffffff1a}
.icon-flag-fallback{width:36px;height:24px;border-radius:5px;background:var(--panel2);display:flex;align-items:center;justify-content:center}
.icon-flag-fallback .icon-globe{width:16px;height:16px;color:var(--muted)}
#countryResultsMeta{display:flex;align-items:center;gap:8px;font:400 10px Space Mono;color:#727a88;margin:8px 0 13px}
#countryResultsMeta .icon-flag{width:22px;height:15px}
.medal-btn{display:inline-flex;align-items:center;gap:6px}
.result-provider .icon-star,.plan strong .icon-star{margin-right:1px}

/* Tiered Pro plans + Reveal Packs */
.tier-plans{display:grid;gap:14px;margin:20px 0 40px}
.tier-plan{position:relative;border:1px solid var(--line);background:#11151d;border-radius:18px;padding:22px}
.tier-plan.tier-unlimited{border-color:#7c4fc9;background:linear-gradient(160deg,#1c1130,#11151d)}
.tier-plan.tier-business{border-color:#f45fc0;background:linear-gradient(160deg,#301130,#11151d)}
.tier-badge{display:inline-block;padding:4px 10px;border-radius:20px;background:#241c33;color:#c9b8e8;font:700 9px Space Mono;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.tier-plan.tier-unlimited .tier-badge{background:#3a2058;color:#e0c3ff}
.tier-plan.tier-business .tier-badge{background:linear-gradient(135deg,#b16cff,#f45fc0);color:#fff}
.tier-plan h3{font-size:18px;margin:0 0 10px}
.tier-price{display:flex;align-items:baseline;gap:8px;font:700 22px Space Mono;color:#fff;margin-bottom:16px}
.tier-price .icon-star{width:16px;height:16px}
.tier-price small{font:400 10px Manrope;color:var(--muted)}
.tier-features{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.tier-features li{font-size:12px;color:#c9c2d4;padding-left:18px;position:relative}
.tier-features li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.tier-features li b{color:#fff}
.pack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pack-option{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:1px solid var(--line);border-radius:12px;background:#0e0a17;color:#fff;cursor:pointer;transition:.15s}
.pack-option:hover,.pack-option:active{border-color:#b16cff;background:#1c1130}
.pack-option:disabled{opacity:.5;cursor:default}
.pack-days{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pack-stars{display:flex;align-items:center;gap:4px;font:700 15px Space Mono}
.pack-stars .icon-star{width:13px;height:13px}
.pack-option small{color:#7a7290;font-size:9px}
@media(max-width:420px){.pack-grid{grid-template-columns:repeat(2,1fr)}}

.top-note{background:#2a2140;border:1px solid var(--line);border-radius:13px;padding:12px;font-size:10px;color:#e3d3fa;margin-bottom:17px}
.top-rank{font:900 17px Space Mono;color:var(--violet)}
.empty-cartoon{text-align:center;background:var(--panel);border:1px dashed var(--line);border-radius:20px;padding:60px 20px;color:var(--muted)}
.empty-cartoon b{display:block;color:var(--text);font-size:18px;margin-bottom:7px}

@media(max-width:620px){
  .main-actions{grid-template-columns:repeat(2,1fr);gap:10px}
  .main-actions button{min-height:116px;display:flex;flex-direction:column;align-items:flex-start;padding:16px;border-radius:18px}
  .main-actions i{width:36px;height:36px;border-radius:11px;font-size:18px}
  .main-actions span{margin:12px 0 0}
  .main-actions em{display:none}
  .directory-card{grid-template-columns:44px 1fr auto}
  .directory-card .logo{width:42px;height:42px}
}

.result-identity{display:flex;align-items:flex-start;gap:10px}
.result-identity>img{width:42px;height:42px;border-radius:10px;object-fit:cover;border:1px solid var(--line);background:#fff}

.sponsor-dialog{width:min(460px,calc(100% - 30px));border:1px solid var(--line);border-radius:22px;padding:0;color:var(--text);background:var(--panel)}
.sponsor-dialog::backdrop{background:rgba(8,5,14,.7)}
.sponsor-dialog form{position:relative;padding:26px;display:grid;gap:14px}
.sponsor-dialog form>span{color:var(--violet);font:700 10px 'Space Mono'}
.sponsor-dialog h2{margin:0;color:var(--text)}
.sponsor-dialog label{display:grid;gap:6px;text-align:left;font-size:11px;font-weight:700;color:var(--muted)}
.sponsor-dialog input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text)}
.sponsor-submit{padding:14px;border:0;border-radius:12px;background:linear-gradient(135deg,#b16cff,#f45fc0);color:#fff;font-weight:800;cursor:pointer}
.sponsor-dialog small{color:var(--muted)}
.sponsor-dialog .modal-close{right:14px;top:10px;position:absolute}

/* Provider detail modal */
.provider-detail{overflow-y:auto;place-items:start center}
.provider-detail>div{width:min(720px,100%);text-align:left;margin:auto}
.provider-detail header{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start}
.provider-detail header .logo{width:64px;height:64px;display:grid;place-items:center;border-radius:16px;overflow:hidden;font-weight:800}
.provider-detail header h2{margin:0 0 4px;color:var(--text)}
.provider-detail header p{margin:8px 0;color:var(--muted)}
.provider-detail header a{color:var(--green)}
.provider-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.provider-summary span{padding:12px;background:var(--panel2);border-radius:12px;text-align:center}
.provider-summary b,.provider-summary small{display:block}
.provider-summary small{margin-top:4px;color:var(--muted);font-size:9px}
.provider-detail section{margin-top:8px}
.provider-detail section h3{color:var(--text)}
.provider-services{display:grid;gap:7px;max-height:280px;overflow:auto}
.provider-services article{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px;border:1px solid var(--line);border-radius:10px}
.provider-services b,.provider-services small{display:block}
.provider-services small{color:var(--muted);margin-top:3px}
.provider-reviews{display:grid;gap:8px}
.provider-reviews article{padding:12px;background:var(--panel2);border:1px solid var(--line);border-radius:11px}
.provider-reviews article>div{display:flex;justify-content:space-between;gap:10px}
.provider-reviews article span{color:var(--violet)}
.provider-reviews article p{margin:8px 0}
.provider-reviews article small,.provider-empty{color:var(--muted)}
.review-form{display:grid;gap:10px;margin-top:14px}
.review-stars{display:flex;gap:2px}
.review-stars input{display:none}
.review-stars label{display:flex}
.review-stars span{font-size:28px;line-height:1;color:#3a2c52;cursor:pointer;transition:color .1s}
.review-stars span.active{color:var(--violet)}
.review-form textarea{min-height:90px;padding:12px;border:1px solid var(--line);border-radius:10px;resize:vertical;background:var(--panel2);color:var(--text)}
.review-form button{padding:12px;border:0;border-radius:10px;background:linear-gradient(135deg,#b16cff,#f45fc0);color:#fff;font-weight:800;cursor:pointer}
@media(max-width:520px){
  .provider-detail>div{padding:20px 15px}
  .provider-summary{grid-template-columns:1fr 1fr 1fr}
  .provider-detail header{grid-template-columns:50px 1fr}
  .provider-detail header .logo{width:50px;height:50px}
}