:root{--ink:#160713;--panel:#25101f;--panel-light:#311127;--line:#58233f;--txt:#fff4fb;--dim:#c7a9bb;--pink:#f044a1;--pink-light:#ff8bc9;--violet:#8b3c9d;--sea:#6de0c0;--blue:#a9c5ff;--bad:#ff8a9a;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:88px}
body{margin:0;min-height:100vh;overflow-x:hidden;background:radial-gradient(ellipse at 50% -20%,#43102f 0,transparent 54%),radial-gradient(ellipse at 100% 70%,#30102b 0,transparent 40%),var(--ink);color:var(--txt);font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;padding-top:env(safe-area-inset-top)}
body:before{position:fixed;inset:0;z-index:-1;content:"";pointer-events:none;background:radial-gradient(circle at 4% 17%,rgba(246,51,150,.68) 0 2px,rgba(242,61,157,.13) 4px,transparent 19px),radial-gradient(circle at 85% 23%,rgba(255,112,192,.75) 0 3px,rgba(230,37,142,.19) 5px,transparent 25px),radial-gradient(circle at 70% 85%,rgba(239,61,157,.52) 0 2px,rgba(229,36,137,.12) 4px,transparent 20px),radial-gradient(circle at 20% 90%,rgba(252,119,193,.58) 0 3px,rgba(225,37,138,.16) 5px,transparent 28px),radial-gradient(ellipse at 50% 50%,transparent 15%,rgba(0,0,0,.16) 100%)}
h1,h2,.brand,.price{font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;font-weight:650;letter-spacing:-.025em}
h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.08;margin:.2em 0 .32em;max-width:24ch;text-wrap:balance}
h2{line-height:1.2}
.meridian{position:fixed;left:-120px;top:20%;width:300px;height:300px;border-radius:50%;background:radial-gradient(ellipse at 38% 32%,rgba(255,162,218,.65) 0 2%,rgba(245,53,158,.46) 5%,rgba(129,13,75,.2) 32%,transparent 70%);filter:blur(5px);pointer-events:none;opacity:.58}
.top{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 20px;padding:12px clamp(18px,5vw,64px);background:rgba(23,7,19,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,139,201,.17)}
.brand{display:flex;align-items:center;gap:9px;color:var(--txt);text-decoration:none;font-size:1.28rem;white-space:nowrap}
.brand-icon{width:38px;height:38px;object-fit:cover;object-position:center 30%;border-radius:12px;border:1px solid rgba(255,139,201,.45);box-shadow:0 5px 22px rgba(240,68,161,.3)}
.brand b{color:var(--pink-light)}
.header-actions{display:flex;align-items:center;justify-self:end;gap:8px;min-width:0}
nav{display:flex;justify-content:center;gap:5px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{color:var(--dim);text-decoration:none;padding:8px 13px;border-radius:10px;white-space:nowrap;transition:color .18s,background .18s}
nav a.on,nav a:hover{color:var(--txt);background:rgba(240,68,161,.13)}
main{width:min(1180px,100%);margin:0 auto;padding:clamp(38px,6vw,78px) clamp(20px,5vw,54px) 90px}
main>section{animation:enter .3s ease-out both}
@keyframes enter{from{opacity:0;transform:translateY(8px)}}
main>section>h1{background:linear-gradient(100deg,#fff4fb 0,#ffb4db 55%,#f044a1 100%);background-clip:text;color:transparent}
.lead{color:var(--dim);max-width:66ch;font-size:1.06rem;margin:.55em 0 1.5em}
code{background:rgba(240,68,161,.13);color:#ffd4e9;padding:2px 7px;border-radius:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin:24px 0}
.card{background:linear-gradient(145deg,rgba(56,22,44,.96),rgba(32,13,28,.96));border:1px solid rgba(255,139,201,.2);border-radius:18px;padding:21px;display:flex;flex-direction:column;gap:9px;transition:border-color .2s,transform .2s,box-shadow .2s}
.card:hover{border-color:rgba(255,139,201,.65);transform:translateY(-3px);box-shadow:0 15px 42px rgba(0,0,0,.24)}
.card h3{margin:0;font-size:1.05rem}
.price{font-size:2rem;color:var(--pink-light)}
.price{direction:ltr;unicode-bidi:isolate}
.card small{color:var(--dim)}
.card img{width:72px;height:72px}
.tag{display:inline-flex;align-self:flex-start;font-size:.78rem;padding:3px 10px;border-radius:99px;background:rgba(109,224,192,.14);color:var(--sea)}
.tag.off{background:rgba(255,138,154,.14);color:var(--bad)}
.btn{font:inherit;cursor:pointer;border:0;border-radius:11px;padding:11px 17px;background:linear-gradient(115deg,#ff8bc9,#ed3997 70%,#cb2b8d);color:#26091b;font-weight:750;box-shadow:0 6px 20px rgba(232,43,145,.17);transition:filter .15s,transform .1s,box-shadow .2s}
.btn:hover{filter:brightness(1.08);box-shadow:0 8px 25px rgba(232,43,145,.3)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:rgba(255,255,255,.025);color:var(--txt);border:1px solid rgba(255,139,201,.24);box-shadow:none}
.btn.danger{background:transparent;color:var(--bad);border:1px solid rgba(255,138,154,.55);box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.card-b{margin-top:auto}
.grid#userPlans,.grid#serverPlans{grid-template-columns:minmax(0,1000px);justify-content:center}
.grid#tiers{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.plan-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.72fr);gap:clamp(24px,5vw,60px);align-items:center;padding:clamp(24px,5vw,48px);border-radius:24px;background:radial-gradient(ellipse at 5% 0,rgba(232,43,145,.2),transparent 55%),linear-gradient(135deg,rgba(51,19,42,.98),rgba(32,12,27,.98));border-color:rgba(255,139,201,.3);box-shadow:0 22px 70px rgba(0,0,0,.28)}
.plan-card:hover{transform:none;border-color:rgba(255,139,201,.45);box-shadow:0 22px 70px rgba(0,0,0,.3)}
.plan-copy h2{font-size:clamp(1.7rem,3vw,2.2rem);margin:.25em 0}
.plan-copy p{color:var(--dim);margin:0;max-width:38ch}
.eyebrow{color:var(--pink-light);font-size:.72rem;font-weight:750;letter-spacing:.16em}
.plan-controls{display:grid;gap:10px;padding:20px;border:1px solid rgba(255,139,201,.2);border-radius:16px;background:rgba(15,6,14,.32)}
.plan-summary{display:flex;align-items:baseline;gap:8px}
.plan-summary .price{font-size:clamp(2.2rem,5vw,3rem);line-height:1}
.plan-summary span{color:var(--dim);font-size:.94rem}
.plan-benefit{min-height:1.5em;color:var(--sea)}
.billing-note{color:var(--dim);font-size:.82rem;line-height:1.45;margin:0}
.plan-buy{width:100%;margin-top:5px}
.purchase-options{display:grid;gap:9px;margin-top:5px}
.purchase-options .btn{width:100%;font-size:.92rem}
.custom-support{display:grid;gap:12px;max-width:680px}
.custom-support h2{font-size:1.45rem;margin:0}
.custom-support p{color:var(--dim);margin:.3em 0}
.custom-support label{font-weight:700}
.custom-support-controls{display:flex;gap:10px;flex-wrap:wrap}
.custom-support input{min-width:150px;flex:1;font:inherit;color:var(--txt);background:rgba(15,6,14,.55);border:1px solid rgba(255,139,201,.3);border-radius:10px;padding:10px 13px}
.custom-support>small{color:var(--dim)}
:focus-visible{outline:2px solid var(--pink-light);outline-offset:3px}
.perks{color:var(--dim);padding:0;max-width:1000px;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:25px auto}
.perks li{padding:14px 16px;background:rgba(45,17,38,.62);border:1px solid rgba(255,139,201,.13);border-radius:12px}
.perks b{color:var(--pink-light)}
.servers{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:20px 0}
.srv{display:flex;gap:12px;align-items:center;text-align:left;background:rgba(42,16,36,.82);border:1px solid rgba(255,139,201,.18);border-radius:14px;padding:13px;color:var(--txt);font:inherit;cursor:pointer;transition:border-color .18s,background .18s}
.srv:hover,.srv[aria-pressed=true]{border-color:var(--pink);background:rgba(74,22,55,.88);box-shadow:0 0 0 1px rgba(240,68,161,.2)}
.srv img,.srv i{width:42px;height:42px;border-radius:50%;background:var(--line);flex:none}
.srv span{display:block;font-size:.8rem;color:var(--dim)}
.panel{background:linear-gradient(145deg,rgba(49,19,42,.94),rgba(33,13,29,.94));border:1px solid rgba(255,139,201,.19);border-radius:17px;padding:21px;margin:16px 0;box-shadow:0 12px 36px rgba(0,0,0,.12)}
.panel h3{margin:.1em 0 .4em}
dl{display:grid;grid-template-columns:max-content 1fr;gap:7px 20px;margin:12px 0}
dt{color:var(--dim)}
dd{margin:0}
.subscription-state{border-top:1px solid rgba(255,139,201,.16);margin-top:16px;padding-top:15px}
.subscription-state p{color:var(--dim);margin:8px 0 12px}
.subscription-actions{display:flex;gap:9px;flex-wrap:wrap}
.rules{border-left:2px solid var(--pink);padding:3px 0 3px 18px;margin-top:36px;color:var(--dim)}
.rules h2{color:var(--txt);font-size:1.2rem}
.notice{padding:13px 17px;border-radius:12px;background:rgba(109,224,192,.1);border:1px solid rgba(109,224,192,.55);margin-bottom:20px}
.notice.err{background:rgba(255,138,154,.1);border-color:rgba(255,138,154,.6)}
.modal{position:fixed;inset:0;background:rgba(12,3,11,.76);backdrop-filter:blur(8px);display:grid;place-items:center;z-index:9;padding:20px}
.modal[hidden]{display:none}
.sheet{background:linear-gradient(145deg,#35172e,#211020);border:1px solid rgba(255,139,201,.32);border-radius:20px;padding:26px;width:min(440px,100%);box-shadow:0 24px 90px rgba(0,0,0,.48);animation:pop .18s ease-out}
.sheet h2{margin:.15em 0 .4em}
.sheet p{color:var(--dim)}
@keyframes pop{from{transform:translateY(8px);opacity:0}}
#payBtns{display:grid;gap:10px;margin:16px 0}
[dir=rtl] body{font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif}
[dir=rtl] .plan-summary{direction:rtl}
[dir=rtl] .subscription-state{border-top:1px solid rgba(255,139,201,.16)}
[dir=rtl] .rules{border-left:0;border-right:2px solid var(--pink);padding:3px 18px 3px 0}
[dir=rtl] .custom-support input{text-align:right}
[dir=rtl] .srv{text-align:right}
@media(max-width:960px){
  .top{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:10px clamp(16px,4vw,32px)}
  .top nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;width:100%;padding:2px 0}
  .top nav a{padding:8px 12px}
  .grid#userPlans,.grid#serverPlans{grid-template-columns:minmax(0,1fr)}
  .plan-card{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:clamp(20px,4vw,38px)}
}
@media(max-width:700px){
  html{scroll-padding-top:126px}
  .brand{font-size:1.12rem}
  .brand-icon{width:34px;height:34px}
  .header-actions{gap:6px}
  .header-actions .btn{min-height:42px;padding:8px 11px}
  #auth{min-height:42px;padding:8px 12px;font-size:.88rem}
  main{padding:34px 20px 64px}
  h1{font-size:clamp(2rem,9vw,2.65rem)}
  .lead{font-size:1rem;margin-bottom:1.2em}
  .plan-card{grid-template-columns:minmax(0,1fr);gap:22px;padding:24px;border-radius:20px}
  .plan-controls{padding:17px}
  .plan-copy p{max-width:48ch}
  .perks{grid-template-columns:1fr;margin-top:20px}
  .servers{grid-template-columns:1fr}
  .srv{min-height:66px}
  .subscription-actions{display:grid;grid-template-columns:1fr}
  .subscription-actions .btn{width:100%;min-height:44px}
  .sheet{max-height:calc(100dvh - 32px);overflow-y:auto;padding:22px}
  .modal{padding:16px}
}
@media(max-width:460px){
  .top{padding:9px 12px;gap:7px 8px}
  .brand{gap:7px;font-size:1rem}
  .brand-icon{width:32px;height:32px;border-radius:10px}
  .header-actions{gap:5px}
  .header-actions .btn{font-size:.76rem;padding:7px 8px}
  #auth{font-size:.78rem;padding:7px 9px;white-space:nowrap}
  .top nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
  .top nav a{font-size:.88rem;padding:7px 6px;text-align:center}
  main{padding:28px 16px 52px}
  .plan-card{padding:18px}
  .plan-controls{padding:15px}
  .purchase-options .btn{min-height:46px}
  .grid#tiers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid#tiers .card{padding:14px;gap:7px;border-radius:14px}
  .grid#tiers .card img{width:54px;height:54px}
  .grid#tiers .card h3{font-size:.95rem}
  .grid#tiers .price{font-size:1.55rem}
  .grid#tiers .card small{font-size:.74rem;line-height:1.35}
  .grid#tiers .btn{font-size:.86rem;padding:9px 10px}
  .custom-support{padding:17px}
  .custom-support-controls{display:grid;grid-template-columns:1fr}
  .custom-support-controls input,.custom-support-controls .btn{width:100%;min-height:46px}
  dl{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:7px 12px;overflow-wrap:anywhere}
  .rules{padding-left:14px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:start;padding:8px 10px;border-bottom:1px solid rgba(128,128,128,.25);white-space:nowrap}
th{font-weight:600}
.icon-pick{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.icon-pick .btn{display:flex;align-items:center;gap:8px;padding:8px 14px}
.icon-pick .btn[aria-pressed="true"]{outline:2px solid #ff8bc9;background:rgba(255,139,201,.18)}
.gift{margin-bottom:14px}.gift input{width:100%;margin:8px 0;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:inherit;font:inherit}.gift small{opacity:.75}
