#sj-urlbar {
	display: flex;
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 40px;
	background: #1a1a2e;
	align-items: center;
	padding: 4px 8px;
	gap: 4px;
	z-index: 999999;
	border-bottom: 1px solid #333;
}

#sj-urlbar-form {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 4px;
}

#sj-urlbar-form > button {
	background: #2a2a3e;
	color: #fff;
	border: none;
	padding: 6px 10px;
	cursor: pointer;
	border-radius: 4px;
	font-size: 14px;
}

#sj-urlbar-form > button:hover {
	background: #3a3a4e;
}

#sj-urlbar-input {
	flex: 1;
	background: #2a2a3e;
	color: #fff;
	border: 1px solid #444;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 14px;
	font-family: monospace;
}

body.sj-browsing {
	overflow: hidden;
}

body.sj-browsing #sj-frame {
	top: 40px !important;
	height: calc(100vh - 40px) !important;
}

/* VPN dot in urlbar */
#sj-vpn-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #f44336;
	flex-shrink: 0;
	transition: background 0.3s;
}

/* ===== VPN Panel ===== */
#sj-vpn-panel {
	display: none;
	position: absolute;
	top: 44px;
	right: 8px;
	background: #0d0d1a;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	width: 340px;
	z-index: 999999;
	flex-direction: column;
	box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ===== Hero Section (Power Button) ===== */
#sj-vpn-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 28px 20px 20px;
	background: linear-gradient(180deg, #0f0f24 0%, #0d0d1a 100%);
	border-bottom: 1px solid rgba(255,255,255,0.04);
}

#sj-vpn-status-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	color: #555;
	text-transform: uppercase;
	margin-bottom: 4px;
}

#sj-vpn-status-text {
	color: #aaa;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 20px;
	transition: color 0.4s;
}

#sj-vpn-panel.connected #sj-vpn-status-text {
	color: #4caf50;
}

#sj-vpn-panel.connecting #sj-vpn-status-text {
	color: #ff9800;
}

#sj-vpn-panel.error #sj-vpn-status-text {
	color: #f44336;
}

/* Power button */
#sj-vpn-power {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.03);
	cursor: pointer;
	padding: 10px;
	position: relative;
	transition: background 0.3s, box-shadow 0.4s;
	box-shadow: 0 0 0 0 transparent;
}

#sj-vpn-power:hover {
	background: rgba(255,255,255,0.06);
}

#sj-vpn-power:active {
	transform: scale(0.95);
}

#sj-vpn-power-svg {
	width: 100%;
	height: 100%;
}

.vpn-power-ring {
	fill: none;
	stroke: #2a2a4e;
	stroke-width: 3;
	transition: stroke 0.4s, filter 0.4s;
}

.vpn-power-icon {
	stroke: #555;
	stroke-width: 5;
	stroke-linecap: round;
	fill: none;
	transition: stroke 0.4s;
}

/* Hover */
#sj-vpn-power:hover .vpn-power-ring {
	stroke: #3a3a5e;
}

#sj-vpn-power:hover .vpn-power-icon {
	stroke: #888;
}

/* Connected state */
#sj-vpn-panel.connected .vpn-power-ring {
	stroke: #4caf50;
	filter: drop-shadow(0 0 12px rgba(76,175,80,0.4));
}

#sj-vpn-panel.connected .vpn-power-icon {
	stroke: #4caf50;
}

#sj-vpn-panel.connected #sj-vpn-power {
	box-shadow: 0 0 30px rgba(76,175,80,0.15);
}

#sj-vpn-panel.connected #sj-vpn-power:hover .vpn-power-ring {
	stroke: #66bb6a;
}

/* Connecting state */
#sj-vpn-panel.connecting .vpn-power-ring {
	stroke: #ff9800;
	filter: drop-shadow(0 0 12px rgba(255,152,0,0.4));
	animation: ring-pulse 1.8s ease-in-out infinite;
}

#sj-vpn-panel.connecting .vpn-power-icon {
	stroke: #ff9800;
}

#sj-vpn-panel.connecting #sj-vpn-power {
	cursor: wait;
	box-shadow: 0 0 30px rgba(255,152,0,0.1);
}

/* Error state */
#sj-vpn-panel.error .vpn-power-ring {
	stroke: #f44336;
}

#sj-vpn-panel.error .vpn-power-icon {
	stroke: #f44336;
}

@keyframes ring-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Server name under power button */
#sj-vpn-server-name {
	color: #666;
	font-size: 12px;
	margin-top: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 280px;
	text-align: center;
	transition: color 0.3s;
}

#sj-vpn-panel.connected #sj-vpn-server-name {
	color: #999;
}

/* Error details */
#sj-vpn-error {
	color: #f44336;
	font-size: 11px;
	margin-top: 8px;
	text-align: center;
	max-width: 280px;
	word-break: break-word;
	display: none;
}

#sj-vpn-panel.error #sj-vpn-error {
	display: block;
}

/* ===== Server Section ===== */
#sj-vpn-server-section {
	padding: 12px;
}

#sj-vpn-search {
	width: 100%;
	background: rgba(255,255,255,0.04);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.08);
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 13px;
	margin-bottom: 8px;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

#sj-vpn-search:focus {
	border-color: rgba(255,255,255,0.15);
	outline: none;
}

#sj-vpn-search::placeholder {
	color: #444;
}

#sj-vpn-server-list {
	max-height: 260px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #222 transparent;
}

.vpn-server-item {
	display: flex;
	align-items: center;
	padding: 9px 10px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s;
	gap: 10px;
	border: 1px solid transparent;
	margin-bottom: 2px;
}

.vpn-server-item:hover {
	background: rgba(255,255,255,0.04);
}

.vpn-server-item.selected {
	background: rgba(100,100,200,0.1);
	border-color: rgba(100,100,200,0.2);
}

.vpn-server-item.active {
	background: rgba(76,175,80,0.08);
	border-color: rgba(76,175,80,0.2);
}

.vpn-server-name {
	flex: 1;
	color: #ccc;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vpn-server-item.active .vpn-server-name {
	color: #4caf50;
}

.vpn-server-ping {
	color: #666;
	font-size: 11px;
	font-family: monospace;
	min-width: 48px;
	text-align: right;
}

.vpn-ping-bar {
	width: 4px;
	height: 16px;
	border-radius: 2px;
	flex-shrink: 0;
}

.vpn-ping-bar.good { background: #4caf50; }
.vpn-ping-bar.ok { background: #ff9800; }
.vpn-ping-bar.bad { background: #f44336; }
.vpn-ping-bar.unknown { background: #333; }

/* Loading state */
#sj-vpn-server-list .vpn-loading {
	color: #444;
	text-align: center;
	padding: 20px;
	font-size: 13px;
}