*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

html, body{
width:100%;
height:100%;
overflow:hidden;
background:#000;
}

#globeViz{
position:absolute;
inset:0;
width:100vw;
height:100vh;
}


/* FOREX ICON */
.forex-icon{
padding:6px 10px;
border-radius:10px;
background:rgba(0,0,0,0.75);
backdrop-filter:blur(8px);
border:1px solid rgba(255,204,0,0.35);
box-shadow:0 0 10px rgba(255,204,0,0.2);
text-align:center;
color:#fff;
font-size:11px;
min-width:64px;
transform:translate(-50%, -50%);
cursor:pointer;
pointer-events:auto;
}

.forex-icon:hover{
border-color:rgba(255,204,0,0.7);
}

.forex-flag{
font-size:16px;
}

.forex-code{
font-weight:bold;
color:#ffcc66;
margin-top:2px;
}

.forex-rate{
font-size:11px;
color:#ccc;
margin-top:1px;
}

/* Stock index badge — deliberately violet + chart icon instead of
   gold + flag, so it's never mistaken for the currency badge. */
.index-icon{
padding:6px 10px;
border-radius:10px;
background:rgba(0,0,0,0.75);
backdrop-filter:blur(8px);
border:1px solid rgba(170,100,255,0.45);
box-shadow:0 0 10px rgba(170,100,255,0.25);
text-align:center;
color:#fff;
font-size:11px;
min-width:68px;
transform:translate(-50%, -50%);
cursor:pointer;
pointer-events:auto;
}

.index-icon:hover{
border-color:rgba(170,100,255,0.8);
}

.index-trend{
font-size:16px;
}

.index-name{
font-weight:bold;
color:#c9a3ff;
margin-top:2px;
font-size:10px;
white-space:nowrap;
}

.index-price{
font-size:11px;
color:#ccc;
margin-top:1px;
}

.index-price.index-up{
color:#00ff88;
}

.index-price.index-down{
color:#ff4d4d;
}

.flight-marker{
font-size:20px;
cursor:pointer;
pointer-events:auto;
filter:drop-shadow(0 0 4px rgba(0,200,255,0.9)) drop-shadow(0 0 2px #000);
transition:filter 0.15s;
}

.flight-marker:hover{
filter:drop-shadow(0 0 8px rgba(0,200,255,1)) drop-shadow(0 0 2px #000);
}

.ship-marker{
font-size:18px;
cursor:pointer;
pointer-events:auto;
filter:drop-shadow(0 0 4px rgba(0,255,150,0.9)) drop-shadow(0 0 2px #000);
transition:filter 0.15s;
}

.ship-marker:hover{
filter:drop-shadow(0 0 8px rgba(0,255,150,1)) drop-shadow(0 0 2px #000);
}

/* TOPBAR */
.topbar{
position:absolute;
top:0;
left:0;
right:0;
padding:8px;
z-index:100;
display:flex;
flex-wrap:wrap;
gap:6px;
background:rgba(0,0,0,0.4);
backdrop-filter:blur(10px);
align-items:center;
}

.topbar input{
flex:1 1 180px;
min-width:120px;
padding:10px;
border:none;
border-radius:8px;
background:rgba(255,255,255,0.95);
font-size:15px;
}

.topbar button{
padding:10px 12px;
border:none;
border-radius:8px;
background:linear-gradient(135deg,#00ff88,#00aaff);
color:#000;
font-weight:bold;
cursor:pointer;
font-size:14px;
}

/* PANEL */
.panel{
position:absolute;
bottom:20px;
right:20px;
width:320px;
background:rgba(0,0,0,0.6);
backdrop-filter:blur(20px);
border:1px solid rgba(0,255,200,0.3);
border-radius:16px;
z-index:101;
overflow:hidden;
transition:0.3s;
}

.panelHeader{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px;
cursor:pointer;
border-bottom:1px solid rgba(255,255,255,0.1);
}

.panelHeader h3{color:#00ffcc;}

.minBtn{
width:32px;
height:32px;
border:none;
border-radius:8px;
background:rgba(0,255,200,0.2);
color:#00ffcc;
font-size:20px;
cursor:pointer;
}

.panel.minimized{
height:60px;
}

.panel.minimized .panelContent{
display:none;
}

.panel.minimized .minBtn{
transform:rotate(-180deg);
}

.panelContent{
padding:14px;
}

.panelContent input,
.panelContent textarea,
.panelContent select{
width:100%;
padding:10px;
margin:6px 0;
border:none;
border-radius:8px;
}

/* AUTH */
.authModal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.75);
backdrop-filter:blur(8px);
z-index:1000;
justify-content:center;
align-items:center;
}

.authBox{
width:90%;
max-width:420px;
background:#111;
border-radius:20px;
padding:20px;
}

.authHeader{
display:flex;
justify-content:space-between;
align-items:center;
color:#00ffcc;
gap:10px;
}

.authHeader h2{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.authBox input{
width:100%;
padding:12px;
margin:8px 0;
border:none;
border-radius:8px;
}

.comboWrap{
position:relative;
}

.countryDropdown{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
max-height:180px;
overflow-y:auto;
background:#161616;
border:1px solid rgba(0,255,200,0.3);
border-radius:8px;
margin-top:-4px;
z-index:5;
box-shadow:0 10px 24px rgba(0,0,0,0.5);
}

.countryDropdown.visible{
display:block;
}

.countryOption{
padding:10px 14px;
color:#eee;
font-size:14px;
cursor:pointer;
}

.countryOption:hover,
.countryOption.active{
background:rgba(0,255,200,0.15);
color:#00ffcc;
}

.countryOption.empty{
color:#888;
cursor:default;
}

.countryOption.empty:hover{
background:none;
color:#888;
}

.authBox button{
width:100%;
padding:12px;
margin-top:10px;
background:linear-gradient(135deg,#00ff88,#00aaff);
border:none;
font-weight:bold;
cursor:pointer;
}

.authHeader button{
width:32px;
height:32px;
flex-shrink:0;
padding:0;
margin-top:0;
background:rgba(255,255,255,0.1);
color:#fff;
font-size:16px;
border-radius:8px;
}

.authBox p{
color:#ccc;
font-size:13px;
margin-top:10px;
}

.authBox a{
color:#00ffcc;
font-weight:bold;
}

.authMessage{
display:none;
color:#ff6b6b;
font-size:13px;
margin:-2px 0 6px;
}

.authMessage.visible{
display:block;
}

.authMessage.success{
color:#00ff88;
}

.newsPanel{
    position:absolute;
right:360px;
width:340px;
max-height:500px;
overflow:hidden;
}

@keyframes slideDownIn{
from{transform:translateY(-140%);opacity:0;}
to{transform:translateY(0);opacity:1;}
}

.cryptoPanel{
position:absolute;
top:70px;
right:20px;
bottom:auto;
width:320px;
max-height:280px;
overflow:hidden;
animation:slideDownIn 0.6s ease-out;
}

.cryptoPanel .panelContent{
max-height:220px;
overflow-y:auto;
}

.cryptoPanel.minimized{
height:60px;
}

.cryptoPanel.minimized .panelContent{
display:none;
}

.commoditiesPanel{
position:absolute;
top:70px;
right:360px;
bottom:auto;
width:320px;
max-height:280px;
overflow:hidden;
animation:slideDownIn 0.6s ease-out;
}

.commoditiesPanel .panelContent{
max-height:220px;
overflow-y:auto;
}

.commoditiesPanel.minimized{
height:60px;
}

.commoditiesPanel.minimized .panelContent{
display:none;
}

.newsPanel .panelContent{
max-height:440px;
overflow-y:auto;
}

.feedItem{
padding:10px;
margin-bottom:6px;
border-radius:8px;
background:rgba(255,255,255,0.06);
color:white;
font-size:13px;
line-height:1.4;
}

.feedItemTop{
display:flex;
align-items:center;
gap:10px;
}

.feedAvatar{
width:32px;
height:32px;
border-radius:50%;
flex-shrink:0;
background-color:rgba(255,255,255,0.12);
background-position:center;
background-size:cover;
background-repeat:no-repeat;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:bold;
color:#00ffcc;
}

.feedAvatar.clickable{
cursor:pointer;
}

.feedAvatar.clickable:hover{
outline:2px solid rgba(0,255,200,0.5);
}

.feedItemInfo{
min-width:0;
}

.feedItemTitle{
font-weight:bold;
color:#fff;
}

.feedItemMeta{
font-size:11px;
color:#999;
margin-top:1px;
}

.feedDesc{
margin-top:6px;
color:#ccc;
font-size:12px;
line-height:1.4;
}

.feedDesc a{
color:#00ffcc;
font-weight:bold;
white-space:nowrap;
}

.feedLoading{
color:#ccc;
padding:10px;
}

.newsPanel.minimized{
height:60px;
}

.newsPanel.minimized .panelContent{
display:none;
}

/* PROFILE */
.editingNotice{
display:none;
font-size:12px;
color:#ffcc66;
margin-top:8px;
}

.editingNotice a{
color:#00ffcc;
}

.profileBox{
max-width:480px;
}

.profileTabs{
display:flex;
gap:8px;
margin:10px 0 4px;
}

.profileTabBtn{
flex:1;
padding:8px;
border:none;
border-radius:8px;
background:rgba(255,255,255,0.08);
color:#ccc;
cursor:pointer;
font-weight:bold;
}

.profileTabBtn.active{
background:rgba(0,255,200,0.2);
color:#00ffcc;
}

.avatarRow{
display:flex;
align-items:center;
gap:14px;
margin:12px 0;
}

.avatarPreview{
width:72px;
height:72px;
border-radius:50%;
background-color:rgba(255,255,255,0.1);
background-position:center;
background-size:cover;
background-repeat:no-repeat;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
font-weight:bold;
color:#00ffcc;
border:2px solid rgba(0,255,200,0.4);
flex-shrink:0;
}

.avatarUploadBtn{
display:inline-block;
padding:8px 12px;
border-radius:8px;
background:rgba(0,255,200,0.15);
color:#00ffcc;
font-size:13px;
font-weight:bold;
cursor:pointer;
}

.privacyToggle{
display:flex;
align-items:center;
gap:8px;
color:#ccc;
font-size:13px;
margin:10px 0;
cursor:pointer;
}

.privacyToggle input{
width:auto;
margin:0;
}

.profileTabContent textarea{
width:100%;
padding:10px;
margin:8px 0;
border:none;
border-radius:8px;
resize:vertical;
font-family:inherit;
}

.myPostItem{
background:rgba(255,255,255,0.06);
border-radius:8px;
padding:10px;
margin-bottom:8px;
}

.myPostTitle{
font-weight:bold;
color:#fff;
}

.myPostMeta{
font-size:11px;
color:#999;
margin:4px 0 8px;
}

.myPostActions{
display:flex;
gap:8px;
}

.myPostActions button{
flex:1;
padding:6px;
border:none;
border-radius:6px;
cursor:pointer;
font-size:12px;
font-weight:bold;
}

.myPostEditBtn{
background:rgba(0,170,255,0.2);
color:#66ccff;
}

.myPostDeleteBtn{
background:rgba(255,80,80,0.15);
color:#ff6b6b;
}

.myPostDeleteBtn.confirming{
background:#ff4d4d;
color:#fff;
}

.viewProfileField{
color:#ccc;
font-size:13px;
margin:6px 0;
}

/* RATE CALCULATOR */
.calcRow{
display:flex;
align-items:center;
gap:10px;
background:rgba(255,255,255,0.06);
border-radius:10px;
padding:10px 14px;
margin:8px 0;
}

.calcRow input{
flex:1;
width:auto;
margin:0;
padding:0;
background:transparent;
border:none;
color:#fff;
font-size:20px;
font-weight:bold;
}

.calcResultValue{
flex:1;
font-size:20px;
font-weight:bold;
color:#00ffcc;
}

.calcCode{
font-weight:bold;
color:#00ffcc;
font-size:14px;
}

.calcSwap{
display:block;
width:100%;
margin:4px 0;
padding:8px;
background:rgba(0,255,200,0.15);
border:none;
border-radius:8px;
color:#00ffcc;
font-weight:bold;
font-size:13px;
cursor:pointer;
}

.calcSwap:hover{
background:rgba(0,255,200,0.25);
}

/* POST POPUP */
.postPopup{
position:absolute;
bottom:20px;
left:20px;
width:280px;
max-height:calc(100vh - 40px);
overflow-y:auto;
background:rgba(0,0,0,0.75);
backdrop-filter:blur(16px);
border:1px solid rgba(0,255,200,0.3);
border-radius:14px;
padding:14px;
color:#fff;
z-index:102;
}

.postPopupClose{
position:absolute;
top:8px;
right:8px;
background:rgba(255,255,255,0.1);
border:none;
color:#fff;
width:24px;
height:24px;
border-radius:6px;
cursor:pointer;
}

.postPopupType{
font-size:11px;
color:#00ffcc;
text-transform:uppercase;
letter-spacing:.05em;
margin-bottom:4px;
}

.postPopupTitle{
font-weight:bold;
margin-bottom:6px;
padding-right:20px;
}

.popupSection{
margin-top:12px;
}

.popupSection:first-of-type{
margin-top:8px;
}

.popupSectionTitle{
font-size:11px;
font-weight:bold;
color:#00ffcc;
text-transform:uppercase;
letter-spacing:.05em;
margin-bottom:4px;
}

.postPopupDesc{
font-size:13px;
color:#ddd;
margin-bottom:8px;
line-height:1.4;
}

.forexDisaster{
background:rgba(255,0,0,0.12);
border:1px solid rgba(255,60,60,0.4);
border-radius:10px;
padding:8px;
margin-bottom:10px;
max-height:200px;
overflow-y:auto;
}

.disasterRow{
display:flex;
gap:8px;
align-items:flex-start;
padding:4px 0;
cursor:pointer;
border-radius:6px;
transition:background 0.15s;
}

.disasterRow:hover{
background:rgba(255,255,255,0.06);
}

.disasterIcon{
font-size:18px;
}

.disasterTitle{
font-weight:bold;
color:#fff;
font-size:13px;
}

.disasterMeta{
font-size:11px;
color:#ffb3b3;
margin-top:2px;
}

.forexCities{
max-height:200px;
overflow-y:auto;
margin-bottom:10px;
background:linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,170,0,0.06));
border:1px solid rgba(255,215,0,0.4);
border-radius:10px;
padding:8px;
}

.cityRow{
display:flex;
gap:8px;
align-items:flex-start;
padding:4px 0;
}

.cityIcon{
font-size:18px;
}

.cityName{
font-weight:bold;
color:#fff;
font-size:13px;
}

.cityMeta{
font-size:11px;
color:#ffdb7a;
margin-top:2px;
}

.forexFlights{
max-height:200px;
overflow-y:auto;
margin-bottom:10px;
background:linear-gradient(135deg, rgba(0,200,255,0.16), rgba(120,80,255,0.08));
border:1px solid rgba(0,200,255,0.4);
border-radius:10px;
padding:8px;
}

.forexShips{
max-height:200px;
overflow-y:auto;
margin-bottom:10px;
background:linear-gradient(135deg, rgba(0,255,150,0.16), rgba(0,170,255,0.06));
border:1px solid rgba(0,255,150,0.4);
border-radius:10px;
padding:8px;
}

.flightRow{
display:flex;
gap:8px;
align-items:flex-start;
padding:4px 0;
cursor:pointer;
border-radius:6px;
transition:background 0.15s;
}

.flightRow:hover{
background:rgba(255,255,255,0.06);
}

.flightIcon{
display:inline-block;
font-size:18px;
}

.flightName{
font-weight:bold;
color:#fff;
font-size:13px;
}

.flightMeta{
font-size:11px;
color:#9fe0ff;
margin-top:2px;
}

.flightCoords{
font-size:10px;
color:#888;
margin-top:1px;
font-family:monospace;
}

.forexList{
max-height:220px;
overflow-y:auto;
margin:6px 0;
background:linear-gradient(135deg, rgba(0,255,136,0.14), rgba(0,170,255,0.06));
border:1px solid rgba(0,255,136,0.35);
border-radius:10px;
padding:8px;
}

.forexRow{
display:flex;
align-items:center;
gap:10px;
padding:8px 4px;
border-bottom:1px solid rgba(255,255,255,0.08);
cursor:pointer;
border-radius:6px;
transition:background 0.15s;
}

.forexRow:hover{
background:rgba(255,255,255,0.06);
}

.forexRow:last-child{
border-bottom:none;
}

.forexFlag{
font-size:20px;
flex-shrink:0;
}

.forexRowMain{
flex:1;
min-width:0;
}

.forexPair{
font-weight:bold;
color:#fff;
font-size:13px;
}

.forexSub{
font-size:11px;
color:#8fd9c4;
margin-top:1px;
}

.forexRowRight{
text-align:right;
flex-shrink:0;
}

.forexValue{
font-weight:bold;
color:#fff;
font-size:13px;
}

.forexTrend{
font-size:12px;
margin-top:1px;
}

.trendUp{
color:#00ff88;
}

.trendDown{
color:#ff4d4d;
}

.trendFlat{
color:#666;
}

.forexRow:last-child{
border-bottom:none;
}

.postPopupMeta{
font-size:11px;
color:#888;
margin-bottom:6px;
}

.postPopupAuthor a{
color:#00ffcc;
font-size:12px;
cursor:pointer;
}

.postPopupAuthor{
font-size:12px;
color:#999;
}

/* CREATE POST LOCATION */
.fieldHint{
font-size:11px;
color:#999;
margin:2px 0 8px;
}

.publishBtn{
width:100%;
padding:12px;
margin-top:10px;
border:none;
border-radius:8px;
background:linear-gradient(135deg,#00ff88,#00aaff);
color:#000;
font-weight:bold;
font-size:14px;
cursor:pointer;
}

.publishBtn:hover{
filter:brightness(1.08);
}

.locationBtn{
width:100%;
padding:10px;
margin:6px 0;
border:none;
border-radius:8px;
background:rgba(0,255,200,0.15);
color:#00ffcc;
font-weight:bold;
font-size:13px;
cursor:pointer;
}

.locationBtn:hover{
background:rgba(0,255,200,0.25);
}

/* MAP PICKER */
.mapBox{
max-width:600px;
width:95%;
}

.mapSearchRow{
display:flex;
gap:8px;
margin:10px 0;
}

.mapSearchRow input{
flex:1;
margin:0;
}

.mapSearchRow button{
width:auto;
margin:0;
padding:0 16px;
}

#pickerMap{
width:100%;
height:360px;
border-radius:12px;
overflow:hidden;
}