
	.theme-toggle.svelte-1cmi4dh {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 1px solid var(--border-vis);
		border-radius: 8px;
		background: var(--bg-elevated);
		color: var(--text-sec);
		cursor: pointer;
		transition: all 0.3s;
		flex-shrink: 0;
	}
	.theme-toggle.svelte-1cmi4dh:hover {
		border-color: var(--gold-dim);
		color: var(--gold);
	}

	.navbar.svelte-rfuq4y {
		background: rgba(15, 13, 11, 0.7);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		padding: 14px 28px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		z-index: 100;
		gap: 10px;
		border-bottom: 1px solid var(--border-vis);
	}
	.navbar.svelte-rfuq4y::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(201,169,110,0.12), transparent);
	}
	.navbar-left.svelte-rfuq4y {
		display: flex;
		align-items: center;
		gap: 20px;
		min-width: 0;
	}
	.navbar-logo.svelte-rfuq4y {
		display: flex;
		align-items: center;
		gap: 8px;
		text-decoration: none;
		flex-shrink: 0;
	}
	.logo-icon.svelte-rfuq4y {
		width: 48px;
		height: 48px;
		object-fit: contain;
	}
	.logo-text.svelte-rfuq4y {
		font-family: var(--font-display);
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 4px;
		background: linear-gradient(180deg, var(--gold-bright), var(--gold));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
	.nav-links.svelte-rfuq4y {
		display: flex;
		align-items: center;
		gap: 20px;
	}
	.navbar-link.svelte-rfuq4y {
		font-size: 14px;
		color: var(--text-sec);
		text-decoration: none;
		letter-spacing: 1px;
		transition: color 0.2s;
		font-family: var(--font-cjk-ui);
		white-space: nowrap;
	}
	.navbar-link.svelte-rfuq4y:hover { color: var(--gold); }
	.navbar-link.active.svelte-rfuq4y {
		color: var(--gold);
		position: relative;
	}
	.navbar-link.active.svelte-rfuq4y::after {
		content: '';
		position: absolute;
		bottom: -4px;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--gold), transparent);
	}
	.navbar-right.svelte-rfuq4y {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-shrink: 0;
	}
	.user-info.svelte-rfuq4y {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		color: var(--text-sec);
	}
	.user-avatar.svelte-rfuq4y {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		border: 1px solid var(--border);
	}
	.user-name.svelte-rfuq4y {
		font-size: 13px;
		color: var(--text-pri);
	}
	.btn-logout.svelte-rfuq4y {
		border: 1px solid var(--border);
		border-radius: 8px;
		padding: 8px 18px;
		cursor: pointer;
		font-family: var(--font-display);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 2px;
		text-transform: uppercase;
		transition: all 0.3s;
		background: var(--bg-elevated);
		color: var(--text-sec);
	}
	.btn-logout.svelte-rfuq4y:hover {
		border-color: var(--gold-dim);
		color: var(--gold);
	}

	/* Hamburger button */
	.hamburger.svelte-rfuq4y {
		display: none;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 36px;
		height: 36px;
		padding: 6px;
		background: none;
		border: 1px solid var(--border-vis);
		border-radius: 6px;
		cursor: pointer;
		transition: border-color 0.2s;
	}
	.hamburger.svelte-rfuq4y:hover { border-color: var(--gold-dim); }
	.ham-bar.svelte-rfuq4y {
		display: block;
		width: 100%;
		height: 1.5px;
		background: var(--text-sec);
		border-radius: 2px;
		transition: all 0.25s;
		transform-origin: center;
	}
	.ham-bar.open.svelte-rfuq4y:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--gold); }
	.ham-bar.open.svelte-rfuq4y:nth-child(2) { opacity: 0; transform: scaleX(0); }
	.ham-bar.open.svelte-rfuq4y:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--gold); }

	/* Mobile overlay */
	.mobile-overlay.svelte-rfuq4y {
		position: fixed;
		inset: 0;
		z-index: 98;
		background: rgba(0, 0, 0, 0.4);
	}

	/* Mobile menu */
	.mobile-menu.svelte-rfuq4y {
		position: fixed;
		top: 57px;
		left: 0;
		right: 0;
		z-index: 99;
		background: rgba(15, 13, 11, 0.97);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-bottom: 1px solid var(--border-vis);
		padding: 12px 0 20px;
		display: flex;
		flex-direction: column;
		animation: svelte-rfuq4y-slideDown 0.2s ease;
	}
	@keyframes svelte-rfuq4y-slideDown {
		from { opacity: 0; transform: translateY(-8px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	.mobile-link.svelte-rfuq4y {
		padding: 14px 28px;
		font-family: var(--font-cjk-ui);
		font-size: 15px;
		color: var(--text-sec);
		text-decoration: none;
		letter-spacing: 1px;
		transition: color 0.15s, background 0.15s;
		border-left: 2px solid transparent;
	}
	.mobile-link.svelte-rfuq4y:hover { color: var(--gold); background: rgba(201,169,110,0.05); }
	.mobile-link.active.svelte-rfuq4y { color: var(--gold); border-left-color: var(--gold); background: rgba(201,169,110,0.06); }
	.mobile-divider.svelte-rfuq4y {
		height: 1px;
		background: var(--border-vis);
		margin: 10px 28px;
	}
	.mobile-logout.svelte-rfuq4y {
		margin: 0 28px;
		padding: 10px 16px;
		background: none;
		border: 1px solid var(--border-vis);
		border-radius: 8px;
		color: var(--text-sec);
		font-family: var(--font-cjk-ui);
		font-size: 14px;
		cursor: pointer;
		text-align: left;
		transition: color 0.2s, border-color 0.2s;
	}
	.mobile-logout.svelte-rfuq4y:hover { color: var(--danger-bright); border-color: var(--danger); }

	/* Storage info */
	.storage-info.svelte-rfuq4y {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 4px 10px;
		border: 1px solid var(--border-vis);
		border-radius: 8px;
		background: rgba(10, 9, 8, 0.5);
	}
	.storage-tier-badge.svelte-rfuq4y {
		font-family: var(--font-display);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 1px;
		padding: 2px 6px;
		border-radius: 4px;
		text-transform: uppercase;
		flex-shrink: 0;
	}
	.tier-vip.svelte-rfuq4y { background: linear-gradient(135deg, #c9a96e, #dcc088); color: #1a1714; }
	.tier-pro.svelte-rfuq4y { background: linear-gradient(135deg, #6e8ac9, #88a0dc); color: #1a1714; }
	.tier-patron.svelte-rfuq4y { background: linear-gradient(135deg, #c96ea0, #dc88b8); color: #1a1714; }
	.tier-basic.svelte-rfuq4y, .tier-free.svelte-rfuq4y { background: var(--bg-elevated); color: var(--text-sec); border: 1px solid var(--border-vis); }
	.storage-bar-wrap.svelte-rfuq4y {
		width: 60px;
		height: 6px;
		border-radius: 3px;
		background: var(--bg-elevated);
		overflow: hidden;
		flex-shrink: 0;
	}
	.storage-bar-wrap.mobile.svelte-rfuq4y {
		width: 100px;
	}
	.storage-bar.svelte-rfuq4y {
		height: 100%;
		border-radius: 3px;
		transition: width 0.3s;
	}
	.storage-text.svelte-rfuq4y {
		font-family: var(--font-mono);
		font-size: 11px;
		color: var(--text-sec);
		white-space: nowrap;
	}
	.mobile-storage.svelte-rfuq4y {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 28px;
	}

	/* Light theme overrides */
	[data-theme="light"] .navbar.svelte-rfuq4y {
		background: rgba(214, 200, 168, 0.92);
		border-bottom: 1px solid rgba(125, 85, 16, 0.25);
		box-shadow: 0 1px 8px rgba(125, 85, 16, 0.1);
	}
	[data-theme="light"] .navbar.svelte-rfuq4y::after {
		background: linear-gradient(90deg, transparent, rgba(125, 85, 16, 0.18), transparent);
	}
	[data-theme="light"] .mobile-menu.svelte-rfuq4y {
		background: rgba(214, 200, 168, 0.97);
		border-bottom: 1px solid rgba(125, 85, 16, 0.2);
	}
	[data-theme="light"] .storage-info.svelte-rfuq4y {
		background: rgba(235, 224, 198, 0.6);
	}

	@media (max-width: 767px) {
		.navbar.svelte-rfuq4y { padding: 12px 16px; }
		.logo-text.svelte-rfuq4y { font-size: 15px; letter-spacing: 2px; }
		.nav-links.svelte-rfuq4y { display: none; }
		.user-name.svelte-rfuq4y { display: none; }
		.desktop-logout.svelte-rfuq4y { display: none; }
		.storage-info.svelte-rfuq4y { display: none; }
		.hamburger.svelte-rfuq4y { display: flex; }
	}
