/* ============ RESET / BASE ============ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --blue:#003399; --blue2:#0055c4; --blue3:#6699cc; --blue4:#b8d0ea;
  --orange:#ff9900; --orange2:#ffcc33;
  --ink:#111; --link:#003399;
}
body{
  font-family:Verdana,Tahoma,Geneva,sans-serif;
  font-size:11px; color:var(--ink);
  background:#0a2a63;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.10) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 61%, rgba(255,255,255,.07) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 77%, rgba(255,255,255,.09) 0 1px, transparent 2px),
    linear-gradient(180deg,#0d3a86 0%, #08265c 45%, #051a42 100%);
  background-attachment:fixed;
  background-size:340px 340px,290px 290px,410px 410px,260px 260px,100% 100%;
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2022%2022%27%3E%3Cpath%20d%3D%27M2%201%20L2%2018%20L6.2%2013.9%20L8.7%2019.8%20L11.9%2018.4%20L9.4%2012.6%20L15.2%2012.3%20Z%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23000000%27%20stroke-width%3D%271.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") 3 2, auto;
  overflow-x:hidden;
}
a{color:var(--link);text-decoration:underline;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%201%20L3%2018.5%20L7.4%2014.2%20L10%2020.4%20L13.4%2019%20L10.8%2012.9%20L16.9%2012.6%20Z%27%20fill%3D%27%23ff9900%27%20stroke%3D%27%233a2200%27%20stroke-width%3D%271.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M18.5%202.2%20L19.4%204.6%20L21.8%205.5%20L19.4%206.4%20L18.5%208.8%20L17.6%206.4%20L15.2%205.5%20L17.6%204.6%20Z%27%20fill%3D%27%23ffee88%27%20stroke%3D%27%23a86b00%27%20stroke-width%3D%270.7%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") 6 2, pointer}
a:hover{color:#cc3300;background:#ffe9b0}
button,input,select,textarea{font-family:Verdana,Tahoma,sans-serif;font-size:11px}
button{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%201%20L3%2018.5%20L7.4%2014.2%20L10%2020.4%20L13.4%2019%20L10.8%2012.9%20L16.9%2012.6%20Z%27%20fill%3D%27%23ff9900%27%20stroke%3D%27%233a2200%27%20stroke-width%3D%271.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M18.5%202.2%20L19.4%204.6%20L21.8%205.5%20L19.4%206.4%20L18.5%208.8%20L17.6%206.4%20L15.2%205.5%20L17.6%204.6%20Z%27%20fill%3D%27%23ffee88%27%20stroke%3D%27%23a86b00%27%20stroke-width%3D%270.7%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") 6 2, pointer}
img{border:0}
.wrap{width:100%;max-width:1000px;margin:0 auto;padding:0 8px}
.clear{clear:both}

/* ============ TICKER ============ */
#ticker{
  position:sticky;top:0;z-index:900;
  background:linear-gradient(180deg,#000 0%,#0a0a0a 50%,#000 100%);
  border-bottom:2px solid var(--orange);
  color:#e8e8e8;
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,Verdana,sans-serif;
  font-size:12.5px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  box-shadow:0 2px 10px rgba(0,0,0,.6);
}
#ticker .tk-inner{display:flex;align-items:center;height:38px;overflow:hidden}
.tk-badge{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  background:linear-gradient(180deg,var(--orange2),var(--orange));
  color:#3a2200;font-weight:700;font-size:10.5px;
  padding:0 12px;height:100%;letter-spacing:.6px;border-right:2px solid #000;white-space:nowrap;
}
.tk-dot{width:8px;height:8px;border-radius:50%;background:#22cc22;box-shadow:0 0 6px #22cc22;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.tk-scroll{flex:1 1 auto;overflow:hidden;white-space:nowrap;position:relative;height:100%}
.tk-track{display:inline-flex;align-items:center;height:100%;white-space:nowrap;animation:tkroll 38s linear infinite;will-change:transform}
#ticker:hover .tk-track{animation-play-state:paused}
@keyframes tkroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk-item{padding:0 20px;display:inline-flex;align-items:center;gap:8px}
.tk-k{color:#a9cdff;font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase}
.tk-v{color:#fff;font-weight:700;font-size:13px;letter-spacing:.2px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.up{color:#3dfd82!important}.down{color:#ff6b6b!important}
.tk-sep{color:#3a4a63;font-weight:400}

/* ============ HEADER ============ */
#hdr{background:linear-gradient(180deg,#1f6fd0 0%, #14539f 40%, #0b3f81 100%);border-bottom:1px solid #04203f}
#hdr .bar{display:flex;align-items:center;gap:14px;padding:10px 8px 8px}
#hdr .logo{height:46px;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
#hdr .tagline{color:#cfe2ff;font-size:10px;font-style:italic;margin-top:2px;letter-spacing:.3px}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.hdr-right input{width:150px;padding:3px 5px;border:1px solid #06305e}
.btn{
  display:inline-block;padding:4px 10px;border:1px solid #052f5c;border-radius:2px;
  background:linear-gradient(180deg,#fff,#cfe0f5);color:#003399;font-weight:bold;font-size:10px;
  text-decoration:none;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%201%20L3%2018.5%20L7.4%2014.2%20L10%2020.4%20L13.4%2019%20L10.8%2012.9%20L16.9%2012.6%20Z%27%20fill%3D%27%23ff9900%27%20stroke%3D%27%233a2200%27%20stroke-width%3D%271.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M18.5%202.2%20L19.4%204.6%20L21.8%205.5%20L19.4%206.4%20L18.5%208.8%20L17.6%206.4%20L15.2%205.5%20L17.6%204.6%20Z%27%20fill%3D%27%23ffee88%27%20stroke%3D%27%23a86b00%27%20stroke-width%3D%270.7%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") 6 2, pointer;
}
.btn:hover{background:linear-gradient(180deg,#fff7e0,#ffd98a);color:#7a3c00;border-color:#a86b00}
.btn-o{background:linear-gradient(180deg,#ffcc33,#ff9900);color:#4a2a00;border-color:#a86b00;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.btn-o:hover{background:linear-gradient(180deg,#fff0b0,#ffb733);color:#4a2a00}
.btn-tg{background:linear-gradient(180deg,#3fb6e8,#1c93cc);color:#fff;border-color:#0d6b99;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.btn-tg:hover{background:linear-gradient(180deg,#6fd0f7,#2ba7dd);color:#fff;border-color:#0d6b99}
.btn-lg{font-size:13px;padding:9px 20px}

/* nav */
#nav{background:linear-gradient(180deg,#f7f7f7,#dcdcdc);border-top:1px solid #fff;border-bottom:1px solid #999}
#nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;max-width:1000px;margin:0 auto}
#nav li{border-right:1px solid #bbb}
#nav a{display:block;padding:6px 13px;color:#003399;font-weight:bold;font-size:10.5px;text-decoration:none;text-transform:capitalize}
#nav a:hover{background:linear-gradient(180deg,#ffcc33,#ff9900);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35)}
#nav .blinkme{color:#cc0000}

/* ============ CTO BANNER ============ */
#ctoBanner{
  background:linear-gradient(180deg,#1b1b1b 0%,#000 100%);
  border-bottom:2px solid var(--orange);
}
.ctob{display:flex;align-items:center;gap:12px;padding:8px;flex-wrap:wrap}
.ctoTag{
  flex:0 0 auto;background:linear-gradient(180deg,#ffcc33,#ff9900);color:#3a2200;
  font-weight:800;font-size:13px;letter-spacing:2px;padding:4px 12px;border:2px solid #fff;border-radius:3px;
  box-shadow:0 0 12px rgba(255,153,0,.55)
}
.ctoTxt{flex:1 1 300px;color:#f0f0f0;font-size:11px;line-height:1.55;min-width:220px}
.ctoTxt b{color:#ffcc33;letter-spacing:.5px}
.ctoMore{flex:0 0 auto}
.cto-chip{
  display:inline-flex;align-items:center;gap:4px;background:linear-gradient(180deg,#ffcc33,#ff9900);
  color:#3a2200;font-size:9px;font-weight:800;letter-spacing:1px;padding:2px 8px;border-radius:9px;
  border:1px solid #b36200;margin-top:6px
}

/* ============ BULLETIN / WELCOME ============ */
#welcome{margin:14px 0}
.tombox{
  background:#fff;border:1px solid #003399;
  box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.tombox .tb-hd{
  background:linear-gradient(180deg,#5c9ade,#2f6fbe 55%,#1d539c);
  color:#fff;font-weight:bold;padding:6px 10px;font-size:12px;
  display:flex;align-items:center;gap:8px;text-shadow:0 1px 1px rgba(0,0,0,.4)
}
.tombox .tb-bd{padding:16px;display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.tom-photo{flex:0 0 auto;text-align:center}
.tom-photo img{width:170px;border:1px solid #333;padding:3px;background:#fff;display:block}
.tom-cap{font-size:10px;color:#555;margin-top:5px}
.tom-msg{flex:1 1 320px;min-width:280px}
.tom-msg h1{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:23px;margin:0 0 4px;color:#003399;line-height:1.15}
.tom-msg h1 small{display:block;font-size:12px;color:#666;font-weight:normal;margin-top:4px}
.tom-msg p{line-height:1.65;margin:9px 0;font-size:11.5px}
.sig{font-family:"Comic Sans MS","Trebuchet MS",cursive;font-size:19px;color:#003399;margin-top:8px}
.hero-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.extnet{
  margin-top:12px;padding:7px 10px;background:#fffbe6;border:1px dashed var(--orange);
  font-size:11px;color:#7a4a00
}

/* ============ PANELS ============ */
.grid{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.col-l{flex:0 0 258px;max-width:100%}
.col-r{flex:1 1 480px;min-width:300px}
.panel{background:#fff;border:1px solid #003399;margin-bottom:12px;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.panel > h2{
  margin:0;padding:5px 9px;font-size:11px;font-family:Verdana,sans-serif;
  background:linear-gradient(180deg,#8fbbe8,#5b91cc 60%,#3d76b4);
  color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35);letter-spacing:.2px;
  border-bottom:1px solid #003399;display:flex;align-items:center;gap:6px;flex-wrap:wrap
}
.panel > h2 .hint{margin-left:auto;font-weight:normal;font-size:9.5px;color:#e6f0ff;text-shadow:none}
.panel .pb{padding:10px}
.panel.orange > h2{background:linear-gradient(180deg,#ffcf5c,#ff9900 60%,#e07b00);color:#4a2a00;text-shadow:0 1px 0 rgba(255,255,255,.45);border-bottom:1px solid #b36200}
.panel.orange{border-color:#b36200}

/* telegram cta */
.tg-big{
  display:flex;align-items:center;gap:10px;text-decoration:none;padding:10px 11px;
  background:linear-gradient(180deg,#3fb6e8,#1c93cc);border:1px solid #0d6b99;border-radius:3px;
  color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.2)
}
.tg-big:hover{background:linear-gradient(180deg,#6fd0f7,#2ba7dd);color:#fff}
.tg-big .tg-ic{font-size:22px;line-height:1;flex:0 0 auto}
.tg-big .tg-tx{flex:1 1 auto;line-height:1.4}
.tg-big .tg-tx b{display:block;font-size:11.5px;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.tg-big .tg-tx em{display:block;font-style:normal;font-size:9.5px;color:#dff4ff;font-family:"Courier New",monospace}
.tg-big .tg-go{flex:0 0 auto;font-size:17px;font-weight:bold}

/* profile card */
.pfp{text-align:center;padding:10px}
.pfp img{width:100%;max-width:186px;border:1px solid #333;padding:3px;background:#fff;image-rendering:auto}
.pfp .name{font-weight:bold;font-size:14px;color:#003399;margin-top:7px;font-family:"Trebuchet MS",sans-serif}
.pfp .mood{font-size:10px;color:#555;margin-top:3px}
.online{display:inline-flex;align-items:center;gap:5px;background:#eaffea;border:1px solid #4caf50;color:#1d6b1d;font-size:9.5px;font-weight:bold;padding:2px 7px;border-radius:9px;margin-top:6px}
.online i{width:7px;height:7px;border-radius:50%;background:#2ecc40;display:block;animation:pulse 1.3s infinite}

/* tables */
table.ms{width:100%;border-collapse:collapse;font-size:10.5px}
table.ms td{padding:5px 7px;border-bottom:1px solid #e3ecf7;vertical-align:top}
table.ms tr:last-child td{border-bottom:0}
table.ms td.k{color:#28527f;font-weight:bold;width:47%;background:#f2f7fd}
table.ms td.v{font-weight:bold;color:#111}
table.ms tr:hover td{background:#fff7de}
.mono{font-family:"Courier New",monospace}

/* contact box */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px}
.contact a{
  display:flex;align-items:center;gap:6px;padding:6px 7px;font-size:10px;font-weight:bold;
  text-decoration:none;background:linear-gradient(180deg,#fff,#e6eefb);border:1px solid #9dbbe0;color:#003399
}
.contact a:hover{background:linear-gradient(180deg,#fff8e2,#ffdc94);border-color:#e0a000;color:#7a3c00}
.contact a span.ic{font-size:13px;line-height:1}

.burnrow{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border:1px solid #e0a000;background:linear-gradient(180deg,#fff9ec,#ffeeca);padding:9px 10px;margin-bottom:6px
}
.burnrow .bamt{font-family:"Trebuchet MS",sans-serif;font-size:16px;font-weight:bold;color:#cc2200;flex:0 0 auto}
.burnrow .bmid{flex:1 1 190px;min-width:150px;font-size:9.5px;color:#7a4a00;line-height:1.5}
.burnrow .bmid code{font-family:"Courier New",monospace;font-size:8.5px;color:#8a5a00;word-break:break-all;display:block;margin-top:2px}
.burnrow .bgo{flex:0 0 auto}

.minibtn{
  display:inline-block;padding:3px 8px;font-size:8.5px;font-weight:bold;letter-spacing:.4px;
  border:1px solid #a86b00;border-radius:2px;text-decoration:none;
  background:linear-gradient(180deg,#ffcc33,#ff9900);color:#4a2a00;
}
.minibtn:hover{background:linear-gradient(180deg,#fff0b0,#ffb733);color:#4a2a00}

/* CA */
.ca-box{padding:10px}
.ca{
  display:flex;gap:6px;align-items:stretch;
}
.ca code{
  flex:1 1 auto;display:block;background:#0f1b2e;color:#7fffbf;font-family:"Courier New",monospace;
  font-size:10px;padding:7px 8px;border:1px solid #000;word-break:break-all;line-height:1.4
}
.ca button{flex:0 0 auto;padding:0 12px;border:1px solid #a86b00;background:linear-gradient(180deg,#ffcc33,#ff9900);color:#4a2a00;font-weight:bold;border-radius:2px}
.ca button:hover{background:linear-gradient(180deg,#fff0b0,#ffb733)}

/* ===== swap ===== */
.swap-tabs{display:flex;gap:0;background:linear-gradient(180deg,#f7f7f7,#dcdcdc);border-bottom:1px solid #b36200}
.swap-tabs button{
  flex:1 1 auto;padding:8px 6px;border:0;border-right:1px solid #bbb;background:transparent;
  font-weight:bold;font-size:11px;color:#5a5a5a;letter-spacing:.3px
}
.swap-tabs button:last-child{border-right:0}
.swap-tabs button.on{background:linear-gradient(180deg,#fff,#ffe9b8);color:#8a3b00;box-shadow:inset 0 -3px 0 var(--orange)}
.swap-tabs button:hover{color:#003399}
.swap-tabs button.on:hover{color:#8a3b00}
.swap-body{padding:11px;background:#f2f7fd}
#jupiter-plugin{width:100%;min-height:80px;border:1px solid #9dbbe0;border-radius:6px;overflow:hidden;background:#131417}
.swap-load{
  display:flex;align-items:center;justify-content:center;gap:9px;height:120px;color:#8fb6ef;
  font-size:11px;font-family:"Courier New",monospace
}
.swap-load .sp{width:13px;height:13px;border:2px solid #2f6fbe;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.swap-note{font-size:9px;color:#5a6b80;margin-top:9px;line-height:1.6}
.swap-alt{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.swap-alt a{
  display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;font-size:10.5px;font-weight:bold;
  text-decoration:none;background:linear-gradient(180deg,#fff,#e6eefb);border:1px solid #9dbbe0;color:#003399
}
.swap-alt a:hover{background:linear-gradient(180deg,#fff8e2,#ffdc94);border-color:#e0a000;color:#7a3c00}
.ray-card{background:#fff;border:1px solid #9dbbe0;padding:14px;text-align:center}
.ray-card h3{margin:0 0 6px;font-family:"Trebuchet MS",sans-serif;font-size:16px;color:#003399}
.ray-card p{font-size:10.5px;color:#555;line-height:1.65;margin:0 0 12px}
.ray-steps{text-align:left;font-size:10px;color:#444;line-height:1.7;margin:12px 0 0;padding:11px;background:#f2f7fd;border:1px dashed #9dbbe0}
.ray-steps b{color:#00265c}
.swap-warn{font-size:9.5px;color:#7a4a00;background:#fffbe6;border:1px dashed var(--orange);padding:8px 10px;margin-top:10px;line-height:1.6}
@media (max-width:480px){ .swap-alt{grid-template-columns:1fr} }

/* raid station */
.raid-tabs{display:flex;gap:0;background:linear-gradient(180deg,#f7f7f7,#dcdcdc);border-bottom:1px solid #b36200;overflow-x:auto}
.raid-tabs button{
  flex:0 0 auto;padding:7px 11px;border:0;border-right:1px solid #bbb;background:transparent;
  font-weight:bold;font-size:10.5px;color:#5a5a5a;white-space:nowrap
}
.raid-tabs button.on{background:linear-gradient(180deg,#fff,#ffe9b8);color:#8a3b00;box-shadow:inset 0 -3px 0 var(--orange)}
.raid-tabs button:hover{color:#003399}
.raid-tabs button.on:hover{color:#8a3b00}
.raid-card{padding:12px;background:#fffdf6}
.raid-txt{
  background:#fff;border:1px solid #e0a000;padding:11px 12px;font-size:11.5px;line-height:1.75;
  color:#1a1a1a;white-space:pre-wrap;font-family:Verdana,Tahoma,sans-serif;position:relative
}
.raid-txt .hl{background:#fff3b0;padding:0 2px;font-weight:bold;color:#7a4a00}
.raid-meta{display:flex;justify-content:space-between;align-items:center;margin-top:7px;font-size:9px;color:#888}
.raid-actions{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.raid-actions button, .raid-actions a{
  flex:1 1 140px;text-align:center;padding:8px;font-weight:bold;font-size:10.5px;border:1px solid #a86b00;
  background:linear-gradient(180deg,#ffcc33,#ff9900);color:#4a2a00;text-decoration:none;border-radius:2px
}
.raid-actions button:hover, .raid-actions a:hover{background:linear-gradient(180deg,#fff0b0,#ffb733);color:#4a2a00}
.raid-actions .alt{background:linear-gradient(180deg,#3fb6e8,#1c93cc);color:#fff;border-color:#0d6b99}
.raid-actions .alt:hover{background:linear-gradient(180deg,#6fd0f7,#2ba7dd);color:#fff}
.raid-dots{display:flex;gap:5px;justify-content:center;margin-top:11px;flex-wrap:wrap}
.raid-dots button{
  width:24px;height:24px;border-radius:50%;border:1px solid #9dbbe0;background:#fff;color:#5580ac;
  font-size:9.5px;font-weight:bold;padding:0
}
.raid-dots button.on{background:linear-gradient(180deg,#ffcc33,#ff9900);color:#4a2a00;border-color:#a86b00}
.raid-dots button:hover{border-color:#e0a000}

/* stats big */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;padding:10px}
.stat{background:linear-gradient(180deg,#fbfdff,#e9f1fb);border:1px solid #b9d0ea;padding:9px 8px;text-align:center}
.stat .lab{font-size:9px;color:#5580ac;text-transform:uppercase;letter-spacing:.6px}
.stat .val{font-size:17px;font-weight:bold;color:#00265c;font-family:"Trebuchet MS",sans-serif;margin-top:3px;word-break:break-word}
.stat .sub{font-size:9px;color:#777;margin-top:2px}

/* supply bar */
.sbar{height:22px;background:#e6eef8;border:1px solid #9dbbe0;position:relative;overflow:hidden;margin:4px 0 2px;display:flex}
.sbar > i{display:block;height:100%}
.sbar .b1{background:repeating-linear-gradient(45deg,#2f6fbe,#2f6fbe 7px,#3f80d0 7px,#3f80d0 14px)}
.sbar .b2{background:repeating-linear-gradient(45deg,#ff9900,#ff9900 7px,#ffb340 7px,#ffb340 14px)}
.sbar .b3{background:repeating-linear-gradient(45deg,#cc2200,#cc2200 7px,#e03d1a 7px,#e03d1a 14px)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:9.5px;color:#444;margin-top:6px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:10px;height:10px;display:block;border:1px solid #0003}

/* top 8 */
.top8{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:11px}
.fr{text-align:center;text-decoration:none;display:block}
.fr .av{
  width:100%;aspect-ratio:1/1;border:1px solid #7fa5cf;background:linear-gradient(160deg,#dfeaf8,#b9cfe9);
  display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden
}
.fr .av img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.fr:hover .av{border-color:var(--orange);box-shadow:0 0 0 2px #ffd98a}
.fr .nm{font-size:9.5px;font-weight:bold;color:#003399;margin-top:4px;line-height:1.3;display:block}
.fr .rk{font-size:8.5px;color:#888;display:block}
.fr:hover{background:transparent}

/* blurbs */
.blurb{padding:11px;line-height:1.75;font-size:11.2px}
.blurb p{margin:0 0 10px}
.blurb ul{margin:6px 0 10px 18px;padding:0}
.blurb li{margin:4px 0}
.blurb strong{color:#00265c}

/* news */
.news-list{padding:6px 10px 11px}
.n{padding:9px 0;border-bottom:1px dotted #b9cfe9;display:flex;gap:9px}
.n:last-child{border-bottom:0}
.n .nsrc{flex:0 0 62px;font-size:8.5px;font-weight:bold;color:#fff;background:#5b91cc;height:fit-content;padding:3px 4px;text-align:center;border-radius:2px;line-height:1.25;word-break:break-word}
.n.live .nsrc{background:#cc2200}
.n .nb{flex:1 1 auto}
.n a.nt{font-size:11.2px;font-weight:bold;line-height:1.4;display:block}
.n .nd{font-size:9px;color:#777;margin-top:3px}
.n .nx{font-size:10px;color:#444;margin-top:4px;line-height:1.55}
.newnote{font-size:9.5px;color:#666;padding:0 10px 10px}

/* comments */
.cm{display:flex;gap:9px;padding:10px;border-bottom:1px solid #e3ecf7}
.cm:last-of-type{border-bottom:0}
.cm .cav{flex:0 0 44px;height:44px;background:linear-gradient(160deg,#dfeaf8,#b9cfe9);border:1px solid #7fa5cf;display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden}
.cm .cav img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.cm .cb{flex:1 1 auto}
.cm .cu{font-weight:bold;color:#003399;font-size:10.5px}
.cm .ct{font-size:9px;color:#888;margin-left:5px;font-weight:normal}
.cm .cx{font-size:10.5px;line-height:1.6;margin-top:4px}
.cform{padding:10px;background:#f2f7fd;border-top:1px solid #cddff2;display:flex;gap:6px;flex-wrap:wrap}
.cform input[type=text]{flex:0 0 130px;padding:5px;border:1px solid #9dbbe0}
.cform textarea{flex:1 1 200px;padding:5px;border:1px solid #9dbbe0;height:38px;resize:vertical;min-width:180px}
.cform button{flex:0 0 auto;padding:5px 14px;border:1px solid #a86b00;background:linear-gradient(180deg,#ffcc33,#ff9900);font-weight:bold;color:#4a2a00}

/* music player */
.player{padding:10px;background:linear-gradient(180deg,#1a1a24,#0c0c14);color:#c9ffdd;font-family:"Courier New",monospace}
.player .pt{display:flex;align-items:center;gap:9px}
.player .pbtn{
  width:34px;height:34px;flex:0 0 34px;border:1px solid #4a4a5e;background:linear-gradient(180deg,#3b3b4d,#20202c);
  color:#7fffbf;font-size:13px;display:flex;align-items:center;justify-content:center;border-radius:3px
}
.player .pbtn:hover{background:linear-gradient(180deg,#55556e,#2c2c3c)}
.player .pinfo{flex:1 1 auto;min-width:0}
.player .pnow{font-size:9px;color:#7a9;letter-spacing:1px}
.player .ptitle{font-size:11px;color:#eaffea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viz{display:flex;align-items:flex-end;gap:2px;height:26px;margin-top:8px}
.viz i{flex:1 1 auto;background:linear-gradient(180deg,#7fffbf,#1e9e60);height:10%;transition:height .09s linear;display:block}
.pnote{font-size:8.5px;color:#667;margin-top:7px;line-height:1.4;font-family:Verdana,sans-serif}

/* counter */
.counter{text-align:center;padding:11px}
.odo{display:inline-flex;gap:2px;background:#000;padding:5px;border:2px inset #888}
.odo b{
  background:linear-gradient(180deg,#333,#000);color:#0f0;font-family:"Courier New",monospace;
  font-size:19px;width:17px;text-align:center;display:block;border:1px solid #0a0;font-weight:normal
}
.counter .cl{font-size:9px;color:#666;margin-top:6px}

/* marquee-ish strip */
.strip{
  background:linear-gradient(180deg,#ffcc33,#ff9900);border-top:2px solid #fff;border-bottom:2px solid #b36200;
  overflow:hidden;white-space:nowrap;color:#3a2200;font-weight:bold;font-size:11px;line-height:20px;padding:6px 0;margin:14px 0
}
.strip .st{display:inline-block;animation:tkroll 26s linear infinite;will-change:transform}
.strip:hover .st{animation-play-state:paused}
.strip .st span{padding:0 26px}

/* glitter divider */
.divider{height:8px;background:repeating-linear-gradient(90deg,#ff9900 0 12px,#003399 12px 24px);margin:0;border-top:1px solid #fff2;border-bottom:1px solid #0004}

/* footer */
#ftr{margin:16px 0 0;background:#fff;border:1px solid #003399;border-bottom:0;padding:14px 12px;font-size:10px;color:#444;line-height:1.75}
#ftr .fl{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:9px}
#ftr .fl a{font-weight:bold}
#ftr .disc{max-width:760px;margin:0 auto;text-align:center;color:#666;font-size:9.5px}
#ftr .cr{text-align:center;margin-top:10px;color:#888;font-size:9.5px}

/* toast */
#toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(24px);
  background:linear-gradient(180deg,#ffcc33,#ff9900);color:#3a2200;border:2px solid #fff;
  padding:9px 20px;font-weight:bold;font-size:11.5px;border-radius:3px;z-index:1200;
  box-shadow:0 6px 22px rgba(0,0,0,.5);pointer-events:none;max-width:90vw;text-align:center;
  opacity:0;visibility:hidden;
  transition:transform .28s ease, opacity .22s ease, visibility 0s linear .28s;
}
#toast.on{
  transform:translateX(-50%) translateY(0);
  opacity:1;visibility:visible;
  transition:transform .28s ease, opacity .22s ease, visibility 0s linear 0s;
}

/* sparkle cursor trail */
.spk{position:fixed;pointer-events:none;z-index:1500;font-size:11px;line-height:1;animation:spkfall .85s ease-out forwards;text-shadow:0 0 5px #fff}
@keyframes spkfall{0%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}100%{opacity:0;transform:translate(var(--dx),26px) scale(.25) rotate(150deg)}}

.blinkme{animation:bl 1.05s steps(2,start) infinite}
@keyframes bl{to{visibility:hidden}}
.new{color:#cc0000;font-size:9px;font-weight:bold}

/* back to top */
#totop{position:fixed;right:14px;bottom:16px;z-index:800;display:none}

@media (max-width:820px){
  .col-l{flex:1 1 100%}
  .top8{grid-template-columns:repeat(3,1fr)}
  #hdr .bar{flex-wrap:wrap;gap:8px}
  .hdr-right{margin-left:0;width:100%}
  .hdr-right input{flex:1 1 auto;width:auto}
  .tom-msg h1{font-size:19px}
}
@media (max-width:480px){
  .top8{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
  .tom-photo{width:100%}
  .tom-photo img{margin:0 auto;width:150px}
}

/* ============================================================
   COMMUNITY APP ADDITIONS
   ============================================================ */
.auth-wrap{max-width:460px;margin:26px auto}
.field{margin-bottom:11px}
.field label{display:block;font-size:10px;font-weight:bold;color:#28527f;margin-bottom:3px;text-transform:uppercase;letter-spacing:.5px}
.field input,.field textarea,.field select{
  width:100%;padding:7px 8px;border:1px solid #9dbbe0;font-size:11.5px;background:#fff
}
.field input:focus,.field textarea:focus{outline:2px solid #ffcc33;border-color:#e0a000}
.field .hint2{font-size:9px;color:#888;margin-top:3px;line-height:1.5}
.field textarea{resize:vertical;min-height:64px}
.bigbtn{
  width:100%;padding:10px;border:1px solid #a86b00;border-radius:2px;
  background:linear-gradient(180deg,#ffcc33,#ff9900);color:#4a2a00;font-weight:bold;font-size:13px
}
.bigbtn:hover{background:linear-gradient(180deg,#fff0b0,#ffb733)}
.bigbtn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.5)}
.msg{padding:9px 11px;font-size:10.5px;line-height:1.6;margin-bottom:11px;border:1px solid}
.msg.err{background:#fff3f2;border-color:#e0a094;color:#a12010}
.msg.ok{background:#f2fff4;border-color:#7ac48f;color:#15612f}
.msg.info{background:#f2f7fd;border-color:#9dbbe0;color:#28527f}
.msg[hidden]{display:none}

/* avatar builder + rendering */
.av{
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid #7fa5cf;line-height:1
}
.av-blue  {background:linear-gradient(160deg,#5c9ade,#1d539c)}
.av-orange{background:linear-gradient(160deg,#ffcc33,#e07b00)}
.av-pink  {background:linear-gradient(160deg,#ff9ad5,#c4247f)}
.av-green {background:linear-gradient(160deg,#7ce89a,#1d9e4f)}
.av-purple{background:linear-gradient(160deg,#c99bf0,#6a1fb0)}
.av-black {background:linear-gradient(160deg,#4a4a56,#101014)}
.av-red   {background:linear-gradient(160deg,#ff8a7a,#b81f00)}
.av-cyan  {background:linear-gradient(160deg,#7fe6f5,#0d8ba8)}
.av.has-img{background:#dfeaf8}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.uploader{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:7px;justify-content:center}
.uploader .btn{cursor:pointer}
.uploader input[type=file]{display:none}
.uphint{font-size:9px;color:#888;line-height:1.5;margin-top:5px;text-align:center}
.upbusy{font-size:9.5px;color:#8a5a00;font-weight:bold}
.av-xl{width:130px;height:130px;font-size:66px;margin:0 auto}
.av-lg{width:88px;height:88px;font-size:44px}
.av-md{width:52px;height:52px;font-size:26px}
.av-sm{width:38px;height:38px;font-size:19px}
.picker{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.picker button{
  width:38px;height:38px;font-size:19px;line-height:1;padding:0;
  border:1px solid #9dbbe0;background:#fff;border-radius:2px
}
.picker button:hover{border-color:var(--orange);background:#fff7de}
.picker button.on{border-color:var(--orange);background:#ffe9b8;box-shadow:0 0 0 2px #ffd98a}
.picker.colors button{width:32px;height:32px}
/* These must out-specify ".picker button{background:#fff}" above, otherwise
   every colour swatch renders as a white square. */
.picker.colors button.av-blue  {background:linear-gradient(160deg,#5c9ade,#1d539c)}
.picker.colors button.av-orange{background:linear-gradient(160deg,#ffcc33,#e07b00)}
.picker.colors button.av-pink  {background:linear-gradient(160deg,#ff9ad5,#c4247f)}
.picker.colors button.av-green {background:linear-gradient(160deg,#7ce89a,#1d9e4f)}
.picker.colors button.av-purple{background:linear-gradient(160deg,#c99bf0,#6a1fb0)}
.picker.colors button.av-black {background:linear-gradient(160deg,#4a4a56,#101014)}
.picker.colors button.av-red   {background:linear-gradient(160deg,#ff8a7a,#b81f00)}
.picker.colors button.av-cyan  {background:linear-gradient(160deg,#7fe6f5,#0d8ba8)}
.picker.colors button.on{box-shadow:0 0 0 3px #ffd98a;border-color:#a86b00}

/* member grid */
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px;padding:11px}
.mcard{
  display:block;text-decoration:none;text-align:center;padding:11px 8px;
  background:linear-gradient(180deg,#fbfdff,#eaf2fc);border:1px solid #9dbbe0
}
.mcard:hover{border-color:var(--orange);box-shadow:0 0 0 2px #ffd98a;background:linear-gradient(180deg,#fffdf5,#ffeecb)}
.mcard .av{margin:0 auto}
.mcard .mn{font-size:11px;font-weight:bold;color:#003399;margin-top:6px;display:block;word-break:break-word}
.mcard .mm{font-size:9px;color:#777;margin-top:2px;display:block;line-height:1.4}
.mcard .mj{font-size:8.5px;color:#9aa;margin-top:3px;display:block}

/* profile header */
.phead{display:flex;gap:16px;padding:14px;flex-wrap:wrap;align-items:flex-start}
.phead .pinfo{flex:1 1 300px;min-width:250px}
.phead h1{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:24px;margin:0;color:#003399;line-height:1.2;word-break:break-word}
.phead .puser{font-size:11px;color:#777;margin-top:2px}
.phead .pmood{font-size:12px;color:#555;font-style:italic;margin-top:6px}
.phead .pacts{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}

/* edit mode */
.editbar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 11px;
  background:linear-gradient(180deg,#fffbe6,#ffeeca);border-bottom:1px solid #e0a000;font-size:10.5px;color:#7a4a00
}
.editbar b{color:#8a3b00}
.editbar .spacer{margin-left:auto}
.edit-only{display:none}
body.editing .edit-only{display:block}
body.editing .view-only{display:none}
.slot{
  display:flex;align-items:center;gap:8px;padding:6px;border:1px solid #cddff2;background:#fbfdff;margin-bottom:5px
}
.slot .sr{flex:0 0 26px;font-weight:bold;color:#5580ac;font-size:10px;text-align:center}
.slot select{flex:1 1 auto;min-width:0;padding:5px;border:1px solid #9dbbe0;font-size:10.5px}

.empty{padding:22px 14px;text-align:center;color:#8899aa;font-size:11px;line-height:1.7}
.loading{padding:26px;text-align:center;color:#5580ac;font-size:11px}
.who{
  display:flex;align-items:center;gap:7px;font-size:10.5px;color:#cfe2ff
}
.who .av{flex:0 0 auto}
/* Only plain links in the header strip go white. Without the :not(.btn)
   the "Log in" and "Log out" buttons inherit white text and become
   near invisible on their light background. */
.who a:not(.btn){color:#fff}
.who a.btn{color:#003399}
.who a.btn:hover{color:#7a3c00}