:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
*{box-sizing:border-box}
body{
  margin:0;background:#0b1320;color:#c7d5e0;font-family:Arial;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  overscroll-behavior: contain;
}
.navbar{
  background:#0f1a2b;
  padding:12px 20px;
  padding-top: calc(12px + var(--safe-top));
  display:flex;gap:18px;align-items:center;border-bottom:1px solid #22324a;
  flex-wrap:wrap;
}
.navbar a{
  color:#7fff7f;text-decoration:none;font-weight:bold;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:8px 10px;border-radius:10px;
}
.navbar a:active{opacity:.85}
.navbar .spacer{margin-left:auto}
.wrap{max-width:1100px;margin:auto;padding:24px;padding-bottom: calc(24px + var(--safe-bottom));}
.h1{font-size:22px;color:#7fff7f;font-weight:bold;margin:0 0 14px}

.grid{display:grid;grid-template-columns: 360px 1fr; gap:16px}
@media(max-width:980px){ .grid{grid-template-columns:1fr} }

.panel{
  background:#1b2838;border:1px solid #22324a;border-radius:14px;padding:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);overflow:hidden
}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.avatar{width:96px;height:96px;border-radius:16px;border:1px solid #22324a;object-fit:cover;background:#0f1a2b}
.small{font-size:12px;opacity:.85}

input,textarea,button{
  padding:10px;border-radius:10px;border:1px solid #22324a;background:#0b1b2a;
  color:#c7d5e0;width:100%;min-height:44px;
}
textarea{min-height:90px;max-height:220px;resize:vertical}
button{cursor:pointer;font-weight:bold;color:#7fff7f}
button:hover{background:#12263b}
button:active{opacity:.9}

.msg{color:#7fff7f;font-weight:bold;margin:10px 0}
.err{color:#ff7f7f;font-weight:bold;margin:10px 0}

.stats{display:grid;grid-template-columns: repeat(4,1fr); gap:10px; margin-top:12px}
@media(max-width:980px){ .stats{grid-template-columns: repeat(2,1fr)} }
.stat{background:#0f1a2b;border:1px solid #22324a;border-radius:12px;padding:12px;min-width:0}
.stat .n{font-size:22px;color:#7fff7f;font-weight:bold;margin-top:6px}
.hr{height:1px;background:#22324a;margin:12px 0}

.formRow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:980px){ .formRow2{grid-template-columns:1fr} }

.linkList a{color:#7fff7f;text-decoration:none;font-weight:bold;word-break:break-word}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid #22324a;background:#0f1a2b;font-size:12px}
.badge18{border-color:#5a2a2a;color:#ffb3b3}

.sigBox{background:#0f1a2b;border:1px solid #22324a;border-radius:12px;padding:12px;margin-top:10px}
.sigPreview{background:#0b1b2a;border:1px dashed #22324a;border-radius:12px;padding:12px;overflow:hidden}

/* signature preview scaling */
.sigMedia{
  width: 100%;
  max-width: 500px;
}
.sigImg{width:500px;height:100px;max-width:100%;object-fit:contain;display:block}

/* buttons alignment for desktop */
.inlineBtns{display:flex;gap:10px;flex-wrap:wrap}
.inlineBtns button{width:auto;min-width:180px}

/* ===== Mobile tweaks ===== */
@media(max-width:640px){
  .navbar{padding:10px 12px; gap:10px;}
  .wrap{padding:14px;}
  .inlineBtns button{width:100%;min-width:0}
}


/* ===== Cosmetic rewards preview on Edit Profile ===== */
.profile-cos-avatar{width:max-content;border-radius:18px;padding:3px;background:#0f1a2b;border:1px solid #22324a;box-shadow:0 8px 18px rgba(0,0,0,.22)}
.profile-cos-avatar .avatar{display:block;border:0;margin:0}
.profile-main-info{min-width:0}
.profile-username{font-size:18px;color:#7fff7f;font-weight:bold;line-height:1.2;word-break:break-word}
.profile-cos-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:5px 0 5px}
.cos-banner{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:4px 10px;border-radius:999px;border:1px solid rgba(127,255,127,.35);background:linear-gradient(135deg,rgba(27,68,47,.95),rgba(15,36,31,.95));color:#d9ffe0;font-size:12px;font-weight:800;box-shadow:0 0 0 1px rgba(0,0,0,.18) inset,0 6px 14px rgba(0,0,0,.18)}
.cos-banner-icon{filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.cos-small-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;border:1px solid rgba(255,220,120,.45);background:rgba(55,42,14,.95);box-shadow:0 5px 12px rgba(0,0,0,.22)}
.cos-frame-bronze{border-color:#b77939;box-shadow:0 0 0 2px rgba(183,121,57,.65),0 0 18px rgba(183,121,57,.25)}
.cos-frame-silver{border-color:#b7d3ff;box-shadow:0 0 0 2px rgba(183,211,255,.75),0 0 18px rgba(183,211,255,.24)}
.cos-frame-gold{border-color:#ffd36a;box-shadow:0 0 0 2px rgba(255,211,106,.8),0 0 22px rgba(255,211,106,.28)}
.cos-banner-ach10{border-color:rgba(136,202,255,.45);background:linear-gradient(135deg,rgba(28,54,82,.98),rgba(15,30,49,.98))}
.cos-banner-ach50{border-color:rgba(127,255,127,.48);background:linear-gradient(135deg,rgba(23,88,52,.98),rgba(13,47,35,.98))}
.cos-banner-streak7{border-color:rgba(255,173,91,.5);background:linear-gradient(135deg,rgba(93,48,21,.98),rgba(48,25,15,.98))}
.cos-banner-streak100{border-color:rgba(191,155,255,.5);background:linear-gradient(135deg,rgba(62,38,112,.98),rgba(28,20,54,.98))}
.cos-name-glow{color:#caffff;text-shadow:0 0 8px rgba(127,255,255,.65),0 0 18px rgba(127,255,127,.35)}
.cos-reward-grid{display:grid;gap:8px;margin-top:8px}
.cos-reward-card{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:12px;border:1px solid #22324a;background:#0f1a2b}
.cos-reward-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;background:#142238;border:1px solid #22324a;flex:0 0 auto}
.cos-reward-text{min-width:0}.cos-reward-title{font-weight:800;color:#7fff7f;margin-bottom:2px}
@media(max-width:640px){.profile-cos-avatar .avatar{width:84px;height:84px}.profile-cos-line{margin-top:6px}}

/* ===== Cosmetics v2: free banners, free avatar frames, selectable profile cosmetics ===== */
.cos-frame-free-green{background:linear-gradient(135deg,#14351d,#7fff7f,#102818)!important;box-shadow:0 0 15px rgba(127,255,127,.25)}
.cos-frame-free-blue{background:linear-gradient(135deg,#102642,#5aa7ff,#0b1628)!important;box-shadow:0 0 15px rgba(90,167,255,.24)}
.cos-frame-free-crt{background:repeating-linear-gradient(135deg,#132235 0 6px,#213a56 6px 12px,#7fff7f 12px 14px)!important;box-shadow:0 0 14px rgba(127,255,127,.18)}
.cos-frame-free-silver{background:linear-gradient(135deg,#5d6874,#d8e5ef,#29313b)!important;box-shadow:0 0 14px rgba(216,229,239,.18)}
.cos-banner-free-coin{border-color:rgba(255,207,84,.45)!important;background:linear-gradient(135deg,#3a2a0a,#7a5818)!important}
.cos-banner-free-backup{border-color:rgba(124,213,255,.42)!important;background:linear-gradient(135deg,#102c3f,#184e61)!important}
.cos-banner-free-lag{border-color:rgba(192,142,255,.42)!important;background:linear-gradient(135deg,#21143e,#4a2675)!important}
.cos-banner-free-crt{border-color:rgba(127,255,127,.38)!important;background:linear-gradient(135deg,#122c20,#203944)!important}
.cos-banner-free-gremlin{border-color:rgba(255,105,180,.36)!important;background:linear-gradient(135deg,#281638,#51204d)!important}
.cos-banner-free-ping{border-color:rgba(90,167,255,.42)!important;background:linear-gradient(135deg,#102642,#173c6a)!important}
.cos-banner-free-crew{border-color:rgba(127,255,127,.42)!important;background:linear-gradient(135deg,#14351d,#1e5530)!important}
.cos-icon-free-joystick,.cos-icon-free-coin,.cos-icon-free-bolt,.cos-icon-free-alien{filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.cos-customize-form{padding:10px;border-radius:14px;border:1px solid #22324a;background:#0f1a2b;box-shadow:0 8px 18px rgba(0,0,0,.16)}
.cos-select-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
.cos-select-block{display:block}.cos-select-block span{display:block;color:#7fff7f;font-size:12px;font-weight:800;margin-bottom:5px}
.cos-select-block select{width:100%;min-height:38px;border-radius:10px;border:1px solid #22324a;background:#081522;color:#dfefff;padding:8px}
@media(max-width:800px){.cos-select-grid{grid-template-columns:1fr}}

/* Post-count/free arcade banner skins */
.cos-banner-free-bomb{background:linear-gradient(135deg,rgba(70,20,20,.94),rgba(210,54,54,.36));border-color:rgba(255,95,95,.45);box-shadow:0 0 14px rgba(255,70,70,.16)}
.cos-banner-free-speed{background:linear-gradient(135deg,rgba(18,34,52,.94),rgba(70,170,255,.30));border-color:rgba(90,190,255,.42);box-shadow:0 0 14px rgba(90,190,255,.16)}
.cos-banner-posts-5,.cos-banner-posts-10{background:linear-gradient(135deg,rgba(18,45,32,.94),rgba(127,255,127,.24));border-color:rgba(127,255,127,.38)}
.cos-banner-posts-20,.cos-banner-posts-30{background:linear-gradient(135deg,rgba(45,35,18,.94),rgba(255,190,90,.26));border-color:rgba(255,190,90,.42)}
.cos-banner-posts-50,.cos-banner-posts-75{background:linear-gradient(135deg,rgba(32,22,58,.94),rgba(165,104,255,.30));border-color:rgba(185,135,255,.45);box-shadow:0 0 14px rgba(165,104,255,.16)}
.cos-banner-posts-100,.cos-banner-posts-150,.cos-banner-posts-200,.cos-banner-posts-300{background:linear-gradient(135deg,rgba(55,18,18,.94),rgba(255,80,80,.30),rgba(255,210,90,.20));border-color:rgba(255,210,90,.48);box-shadow:0 0 16px rgba(255,180,80,.18)}
/* Light/mobile cosmetic form mini fixes */
.cos-select-grid{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.cos-select-block select{
  min-width:0;
  width:100%;
  white-space:normal;
  text-overflow:clip;
}
@media(max-width:520px){
  .cos-select-grid{grid-template-columns:1fr;}
}

/* ===== Cosmetic rarity badges/cards (restored after light CSS patch) ===== */
.cos-banner.rarity-free{box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 6px 14px rgba(0,0,0,.18)}
.cos-banner.rarity-common{border-color:rgba(127,255,127,.42)}
.cos-banner.rarity-rare{border-color:rgba(90,167,255,.55);box-shadow:0 0 14px rgba(90,167,255,.18)}
.cos-banner.rarity-epic{border-color:rgba(188,120,255,.58);box-shadow:0 0 16px rgba(188,120,255,.22)}
.cos-banner.rarity-legendary{border-color:rgba(255,204,92,.68);box-shadow:0 0 18px rgba(255,204,92,.28)}
.cos-banner.rarity-mythic{border-color:rgba(255,95,143,.74);box-shadow:0 0 22px rgba(255,95,143,.34),0 0 34px rgba(127,255,255,.14)}
.cos-rarity-badge{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:999px;font-size:10px;line-height:1.2;font-weight:900;text-transform:uppercase;letter-spacing:.04em;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#dfefff;vertical-align:middle;white-space:nowrap}
.cos-rarity-badge.rarity-free{color:#d8dde5;border-color:rgba(216,221,229,.28)}
.cos-rarity-badge.rarity-common{color:#bfffc6;border-color:rgba(127,255,127,.35)}
.cos-rarity-badge.rarity-rare{color:#aad7ff;border-color:rgba(90,167,255,.45)}
.cos-rarity-badge.rarity-epic{color:#d9b8ff;border-color:rgba(188,120,255,.50)}
.cos-rarity-badge.rarity-legendary{color:#ffe09a;border-color:rgba(255,204,92,.58)}
.cos-rarity-badge.rarity-mythic{color:#ffb8d0;border-color:rgba(255,95,143,.64);background:linear-gradient(135deg,rgba(255,95,143,.12),rgba(127,255,255,.08))}
.cos-reward-card.rarity-rare{border-color:rgba(90,167,255,.32)}
.cos-reward-card.rarity-epic{border-color:rgba(188,120,255,.36)}
.cos-reward-card.rarity-legendary{border-color:rgba(255,204,92,.38)}
.cos-reward-card.rarity-mythic{border-color:rgba(255,95,143,.44);box-shadow:0 0 18px rgba(255,95,143,.10)}
@media (prefers-color-scheme: light){
  .cos-rarity-badge{background:rgba(255,255,255,.68);color:#243041}
  .cos-rarity-badge.rarity-mythic{background:linear-gradient(135deg,rgba(255,95,143,.18),rgba(127,180,255,.12))}
}

/* ===== Profile cosmetics: stronger rarity badges + proper light theme ===== */
.cos-rarity-badge{
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.055em;
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 0 10px rgba(0,0,0,.22);
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.cos-rarity-badge.rarity-free{background:#4b5563;border-color:#7b8795;color:#fff}
.cos-rarity-badge.rarity-common{background:#16a34a;border-color:#86efac;color:#f0fff4}
.cos-rarity-badge.rarity-rare{background:#2563eb;border-color:#93c5fd;color:#eff6ff}
.cos-rarity-badge.rarity-epic{background:#7c3aed;border-color:#c4b5fd;color:#faf5ff}
.cos-rarity-badge.rarity-legendary{background:linear-gradient(135deg,#f59e0b,#facc15);border-color:#fde68a;color:#241409;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.cos-rarity-badge.rarity-mythic{background:linear-gradient(135deg,#db2777,#7c3aed,#06b6d4);border-color:#f9a8d4;color:#fff;box-shadow:0 0 12px rgba(219,39,119,.35),0 0 18px rgba(6,182,212,.18)}

.cos-reward-card{transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.cos-reward-card.rarity-free{border-color:rgba(148,163,184,.35)}
.cos-reward-card.rarity-common{border-color:rgba(34,197,94,.50);box-shadow:0 0 0 1px rgba(34,197,94,.08) inset}
.cos-reward-card.rarity-rare{border-color:rgba(59,130,246,.58);box-shadow:0 0 0 1px rgba(59,130,246,.10) inset,0 0 16px rgba(59,130,246,.10)}
.cos-reward-card.rarity-epic{border-color:rgba(168,85,247,.62);box-shadow:0 0 0 1px rgba(168,85,247,.12) inset,0 0 18px rgba(168,85,247,.14)}
.cos-reward-card.rarity-legendary{border-color:rgba(245,158,11,.70);box-shadow:0 0 0 1px rgba(245,158,11,.16) inset,0 0 20px rgba(245,158,11,.16)}
.cos-reward-card.rarity-mythic{border-color:rgba(219,39,119,.72);box-shadow:0 0 0 1px rgba(219,39,119,.16) inset,0 0 22px rgba(219,39,119,.18),0 0 26px rgba(6,182,212,.08)}

html[data-theme="light"] .cos-customize-form,
body.light .cos-customize-form{
  background:#f8fafc;
  border-color:#cbd5e1;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
html[data-theme="light"] .cos-customize-form .small,
body.light .cos-customize-form .small{
  color:#475569;
  opacity:1;
}
html[data-theme="light"] .cos-select-block span,
body.light .cos-select-block span{
  color:#16a34a;
}
html[data-theme="light"] .cos-select-block select,
body.light .cos-select-block select{
  background:#fff;
  color:#0f172a;
  border-color:#cbd5e1;
}
html[data-theme="light"] .cos-reward-card,
body.light .cos-reward-card{
  background:#ffffff;
  border-color:#d8e1ec;
  box-shadow:0 8px 16px rgba(15,23,42,.06);
}
html[data-theme="light"] .cos-reward-ico,
body.light .cos-reward-ico{
  background:#eef6ff;
  border-color:#cbd5e1;
}
html[data-theme="light"] .cos-reward-title,
body.light .cos-reward-title{
  color:#15803d;
}
html[data-theme="light"] .cos-reward-card .small,
body.light .cos-reward-card .small{
  color:#475569;
  opacity:1;
}
html[data-theme="light"] .cos-reward-card.rarity-free,
body.light .cos-reward-card.rarity-free{border-color:#94a3b8}
html[data-theme="light"] .cos-reward-card.rarity-common,
body.light .cos-reward-card.rarity-common{border-color:#22c55e;background:linear-gradient(135deg,#ffffff,#f0fff4)}
html[data-theme="light"] .cos-reward-card.rarity-rare,
body.light .cos-reward-card.rarity-rare{border-color:#3b82f6;background:linear-gradient(135deg,#ffffff,#eff6ff)}
html[data-theme="light"] .cos-reward-card.rarity-epic,
body.light .cos-reward-card.rarity-epic{border-color:#a855f7;background:linear-gradient(135deg,#ffffff,#faf5ff)}
html[data-theme="light"] .cos-reward-card.rarity-legendary,
body.light .cos-reward-card.rarity-legendary{border-color:#f59e0b;background:linear-gradient(135deg,#ffffff,#fffbeb)}
html[data-theme="light"] .cos-reward-card.rarity-mythic,
body.light .cos-reward-card.rarity-mythic{border-color:#db2777;background:linear-gradient(135deg,#ffffff,#fff1f2,#ecfeff)}