/* Modals module - base modal and common variants (extracted) */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(4px);z-index:13000;overflow-y:auto}
.modal:not(.user-panel){display:none;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,0.6)}
.modal:not(.user-panel) .modal-content{
	margin:0;
	padding:24px;
	border-radius:16px;
	background: linear-gradient(145deg, var(--bg-0), var(--bg-1));
	animation: modalSlideIn 0.3s ease;
	width:100%;
	max-width:920px;
	/* prevent inner scrollbars on most forms; allow overlay to scroll if needed */
	max-height:calc(100vh - 80px);
	overflow:visible;
	color:var(--text);
	border:1px solid var(--glass-border);
	box-shadow:0 25px 50px rgba(0,0,0,0.5);
}
#adminAuthModal .modal-content{
	width:420px;
	max-width:92%;
	padding:18px;
	height:auto;
	max-height:calc(100vh - 80px);
}
@media (max-width:480px){
	#adminAuthModal .modal-content{width:calc(100% - 48px);padding:14px}
}
#authModal .modal-content{
	width:420px;
	max-width:92%;
	padding:18px;
	height:auto;
	max-height:calc(100vh - 80px);
}
.password-field{position:relative}
.password-field input{padding-right:42px}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;font-size:18px;color:var(--muted);padding:4px}
.password-toggle:focus{outline:none}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.modal-title{font-size:20px;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--primary-dark));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.close{font-size:26px;color:#aaa;cursor:pointer;transition:all .3s ease}
.close:hover{color:var(--primary)}

/* Modal show animation */
@keyframes modalSlideIn {
	from { transform: translateY(10px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* Make form titles and prompt titles match the requested gradient/text style */
.form-title, .modal-title, #customPrompt .confirm-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--primary);
	margin: 0 0 8px 0;
	background: linear-gradient(135deg, var(--primary), #ffd700);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Specific smaller size for dayModal (Add Trade) so it looks compact */
#dayModal .modal-content{
	max-width: 680px;
	width: min(94%, 680px);
	padding: 14px;
}

/* Make dayModal scrollable with a custom futuristic scrollbar */
#dayModal .modal-content{
	max-height: 72vh;
	overflow-y: auto;
}

/* Compact square-ish modals for account creation and settings */
#accountModal .modal-content,
#settingsModal .modal-content {
	max-width: 520px;
	width: min(86%, 520px);
	/* try to keep a square-ish feel: limit height and allow scroll */
	max-height: 72vh;
	overflow-y: auto;
	padding: 16px;
	border-radius: 14px;
}

/* Compact confirm modal (delete / confirmation dialogs) */
#confirmDeleteModal .modal-content,
.modal.confirm-modal .modal-content {
	max-width: 380px;
	width: min(92%, 380px);
	padding: 12px 14px;
	max-height: 60vh;
	overflow-y: auto;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

@media (max-width:480px){
	#confirmDeleteModal .modal-content,
	.modal.confirm-modal .modal-content { width: calc(100% - 32px); padding: 10px; }
}

/* Make import modal compact too */
#importModal .modal-content {
	max-width: 520px;
	width: min(86%, 520px);
	max-height: 72vh;
	overflow-y: auto;
	padding: 16px;
	border-radius: 14px;
}

/* Futuristic custom scrollbar for modal content */
.modal .modal-content {
	scrollbar-width: thin;
	scrollbar-color: rgba(255,154,60,0.28) rgba(255,255,255,0.02);
}
.modal .modal-content::-webkit-scrollbar { width: 10px; }
.modal .modal-content::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 12px; }
.modal .modal-content::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(255,154,60,0.24), rgba(255,154,60,0.4));
	border-radius: 12px;
	border: 2px solid rgba(0,0,0,0.12);
}
.modal .modal-content::-webkit-scrollbar-thumb:hover { filter: brightness(1.08); }

/* Styles for custom prompt confirm/cancel buttons so they match all form buttons */
#customPrompt .confirm-accept {
	background: linear-gradient(135deg, var(--primary), var(--primary-dark));
	color: white;
	border: none;
	box-shadow: 0 8px 30px rgba(255, 154, 60, 0.18);
	position: relative;
	overflow: hidden;
}
#customPrompt .confirm-cancel, #customPrompt .confirm-accept {
	padding: 12px 24px;
	border-radius: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	min-width: 120px;
	font-size: 14px;
}

/* Ensure generated prompt input uses the same input look */
#customPrompt .prompt-input{
	width:100%;
	padding:12px 16px;
	background: rgba(255,255,255,0.05);
	border:1px solid rgba(255,255,255,0.2);
	border-radius:8px;
	color:var(--text);
	font-size:16px;
	margin-bottom:20px;
}

/* Floating user panel variant */
.modal.user-panel{background:transparent;pointer-events:none}
.modal.user-panel .modal-content{margin:0;position:fixed;top:68px;right:18px;width:320px;max-width:calc(100% - 36px);border-radius:12px;padding:12px 14px;background:linear-gradient(180deg,rgba(10,20,34,0.95),rgba(12,18,30,0.88));border:1px solid rgba(255,154,60,0.12);box-shadow:0 12px 40px rgba(0,0,0,0.6),0 0 30px rgba(255,154,60,0.06) inset;backdrop-filter:blur(12px) saturate(140%);z-index:1200;pointer-events:auto;animation:slideDownFuturistic 220ms cubic-bezier(.2,.9,.2,1)}
.modal.user-panel .modal-header{display:flex;align-items:center;gap:8px}
.modal.user-panel .close{font-size:20px;color:rgba(255,255,255,0.6)}