@font-face {
	font-family: ChorusFont;
	src:url("/fonts/texgyrechorus-mediumitalic.otf");
}
@font-face {
	font-family: AbyssFont;
	src:url("/fonts/AbyssinicaSIL-Regular.ttf");
}

@font-face {
	font-family: C059Font;
	src:url("/fonts/C059-Roman.otf");
}

:root{
	--bg:#0f1724;
	--card:#0b1220;
	--accent:#4f46e5;
	--muted:#94a3b8;
	--text:#e6eef8;
	--silver:#bfbfc7
}

*{
	box-sizing:border-box;
	font-family: AbyssFont;
}

#background {
	opacity: .15;
	margin: 0 auto;
	position: fixed;
	z-index: -5;
}

#mailPreview {
	white-space: pre-wrap;
}

.maxHeight {
	height: 99vh 99vw;
}

.autoScroll {
	overflow: auto
}

.infoText {
	font-size: 20px;
	font-family: AbyssFont;
	margin: -24px auto;
	/*display: flex;
	justify-content: center;
	align-items: center;*/
	color: var(--silver);
}

.navText {
	font-size: 24px;
	font-family: C059Font;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--silver);
}

.prevText {
	font-size: 18px;
	font-family: AbyssFont;
	display: flex;
	justify-content: center;
	align-items: left;
	color: var(--silver);
	padding: 6px 12px !important;
	overflow: hidden;
}

.oneLine {
	white-space: nowrap;
}

#mailList {
	padding: 0;
	margin: 0;
}

.navHeight img {
	height: 48px;
	width: 48px;
	margin: -24px;
	margin-bottom: 0;
}

.hflex {
	display: flex;
	flex-direction: row;
	gap: 3px;
}

.vflex {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.staticFlex {flex: 0 0 auto;}
.varFlex {flex: 1;}

.mailFrame {
	padding: 1vh 1vw;
	width: 98vw;
	height: 98vh;
}

.navBtn {
	text-decoration: none;
	text-align: center;
}

.navHeight {
	height: 48px;
}

.navWidth {
	width: 280px;
}

.clampNavWidth {
	width: calc(98vw - 280px);
}

.clampNavHeight {
	height: calc(98vh - 96px);
	overflow: auto;
}

html,body{
	height:100%;
}

body{
	margin:0;
	background:linear-gradient(180deg,#071025 0%,var(--bg)100%);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--text);
}

.container{
	width:100%;
	max-width:420px;
	padding:24px;
}

.card{
	background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
	border:1px solid rgba(255,255,255,0.04);
	padding:28px;
	border-radius:12px;
	box-shadow:0 6px 24px rgba(2,6,23,0.6);
}

.btnCard:hover {
	background:linear-gradient(180deg,rgba(255,255,255,0.08),transparent);
	cursor: pointer;
}

.brand{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:18px;
}

.logo{
	width:48px;
	height:48px;
	background:linear-gradient(135deg,#6ee7b7,#60a5fa);
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#042027;
	font-weight:700;
	font-size:18px;
}

h1{
	margin:0;
	font-size:20px;
}

p.lead{
	margin:6px 0 16px;
	color:var(--muted);
	font-size:13px;
}

label{
	display:block;
	font-size:13px;
	margin-bottom:6px;
	color:var(--muted);
}

.input{
	width:100%;
	padding:10px 12px;
	border-radius:8px;
	border:1px solid rgba(255,255,255,0.04);
	background:rgba(255,255,255,0.02);
	color:var(--text);
	outline:none;
}

.input:focus{
	box-shadow:0 0 0 4px rgba(79,70,229,0.08);
	border-color:rgba(79,70,229,0.6);
}

.btn{
	width:100%;
	padding:10px 12px;
	border-radius:10px;
	border:0;
	background:linear-gradient(90deg,var(--accent),#7c3aed);
	color:white;
	font-weight:600;
	cursor:pointer;
}

.btn-mute{
	width:100%;
	border-radius:10px;
	font-weight:600;
	cursor:pointer;
	background:transparent;
	border:1px solid rgba(255,255,255,0.06);
	color:var(--muted);
	text-align: center;
	padding: 5px 6px;
}

.footer{
	margin-top:14px;
	text-align:center;
	color:var(--muted);
	font-size:12px;
}

.flash{
	background:rgba(255,69,96,0.08);
	color:#ffb3be;
	padding:10px;
	border-radius:8px;
	margin-bottom:12px;
	border:1px solid rgba(255,69,96,0.12);
}

.flashOK{
	background:rgba(96,255,69,0.08);
	color:#beffb3;
	border:1px solid rgba(96,255,69,0.12);
}

/* navHover */

/* right panel: hidden by default */
.navRightPanel{
	position: absolute;
	top: 0;
	right: -100%;             /* hide outside */
	width: 20%;               /* right quarter */
	height: 100%;
	display: flex;
	flex-direction: column;   /* stack three buttons vertically */
	transition: right 0.18s ease;
	pointer-events: none;     /* prevent clicks when hidden */
}

.navRightPanel a{
	text-decoration: none;
	color: var(--silver);
}

.navBox{
	right: 0;
	pointer-events: auto;
	position: relative;       /* container for absolute panel */
	overflow: hidden;
}

/* show panel on parent hover */
.navBox:hover .navRightPanel{
	right: 0;
	pointer-events: auto;
}

/* each button takes one-third of panel height */
.navRightBtn{
	flex: 1 1 0;
	display: flex;
	cursor: pointer;
	align-items:center;
	justify-content:center;
	font-size: 10px;
	font-weight: bold;
}

#bkBtn {
	font-family: C059Font;
	font-size: 96px;
	opacity: .4;
	position: fixed;
	top: 0;
	width: 100vw;
	padding: 0 20px;
	margin-top: -26px;
	color: #D46C2060;
	display: none;
}

/* colors */
/*.navRightBtn.green{ background: linear-gradient(to right, #22c55e00 0%, #22c55e10 10%, #22c55e80 40%, #22c55ec0 100%); }
.navRightBtn.red{ background: linear-gradient(to right, #ef444400 0%, #ef444410 10%, #ef444480 40%, #ef4444c0 100%); }
.navRightBtn.yellow{ background: linear-gradient(to right, #f59e0b00 0%, #f59e0b10 10%, #f59e0b80 40%, #f59e0bc0 100%); }*/
.navRightBtn.green{ background: #107331c0; }
.navRightBtn.red{ background: #8F1E53c0; }
.navRightBtn.yellow{ background: #918F2Dc0; }

/* ------------ Mobile -------------- */

/* @media(max-width: 580px) { */
	/*#navBar {
		
	}
	#contField {
		display: none;
	}*/
	/*.navWidth {
		width: 98vw;
	}*/
	/* } */
	
@media(orientation: portrait) {
	.navWidth {
		width: 98vw;
	}
}