:root{
	--font-mono: "PT Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--topbar-h: 44px;
	--footer-h: 28px;
}

:root[data-theme="dark-1"]{
	--white: #ffffff;

	--gray10: #1a1a1a;
	--gray20: #333333;
	--gray30: #4d4d4d;

	--len-1: 6px;
	--len-2: 8px;
	--len-3: 10px;
	--len-4: 12px;
	--len-5: 16px;

	--radius-1: 6px;
	--radius-2: 8px;

	--border-1: 1px;

	--page-bg: var(--gray10);

	--topbar-pad-y: var(--len-3);
	--topbar-pad-x: var(--len-3);
	--topbar-inner-gap: var(--len-4);

	--brand-gap: var(--len-3);
	--brand-img-h: 24px;
	--brand-font-size: 1.5em;

	--topbar-right-gap: var(--len-2);
	--auth-input-w: 160px;

	--radius-input: var(--radius-1);
	--radius-button: var(--radius-2);

	--input-bg: var(--gray20);
	--input-fg: var(--white);
	--input-border: var(--gray30);

	--button-bg: var(--gray30);
	--button-fg: var(--white);
	--button-border: var(--gray20);

	--input-pad-y: var(--len-1);
	--input-pad-x: var(--len-2);

	--button-pad-y: var(--len-1);
	--button-pad-x: var(--len-3);

	--feed-gap: var(--len-2);
	--feed-pad: var(--len-2);

	--page-card-gap: var(--len-3);
	--page-card-pad: var(--len-4);
	--page-card-icon-size: 48px;

	--post-gap: var(--len-3);
	--post-pad: var(--len-4);

	--phi: 1.618;
	--feed-height-ratio: calc(1 / var(--phi));
	--feed-width-ratio: calc(1 / var(--phi));

	--menu-panel-min-w: 220px;
	--topbar-transition-ms: 180ms;
}

*{
	box-sizing: border-box;
}

html, body{
	height: 100%;
}

body{
	margin: 0;
	background: var(--page-bg);
	font-family: var(--font-mono);
	overflow-x: hidden;
	overflow-y: auto;
}

#bg{
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	pointer-events: none;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#topbar{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background: var(--page-bg);
	border-bottom: var(--border-1) solid var(--gray30);
	transform: translateY(0);
	transition: transform var(--topbar-transition-ms) ease;
}

#topbar.is-hidden{
	transform: translateY(calc(-1 * var(--topbar-h)));
}

#topbarInner{
	display: flex;
	align-items: flex-start;
	padding: var(--topbar-pad-y) var(--topbar-pad-x);
	gap: var(--topbar-inner-gap);
}

#brand{
	display: flex;
	align-items: flex-start;
	gap: var(--brand-gap);
	white-space: nowrap;
	min-width: 0;
}

#brandText{
	color: var(--white);
	font-size: var(--brand-font-size);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
}

#brandImg{
	display: none;
	height: var(--brand-img-h);
	width: auto;
}

#topbarSpacer{
	flex: 1;
	min-width: 0;
}

#topbarRight{
	display: flex;
	align-items: flex-start;
	gap: var(--topbar-right-gap);
	justify-content: flex-end;
	flex-wrap: wrap;
	margin-left: auto;
	min-width: 0;
	position: relative;
}

.topbarGroup{
	display: flex;
	align-items: flex-start;
	gap: var(--topbar-right-gap);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.topbarGroupMeta{
	justify-content: flex-end;
}

#topbarRight input,
.modalCard input,
.topbarMenuSection input{
	width: var(--auth-input-w);
	font-family: var(--font-mono);
	background: var(--input-bg);
	color: var(--input-fg);
	border: var(--border-1) solid var(--input-border);
	border-radius: var(--radius-input);
	padding: var(--input-pad-y) var(--input-pad-x);
}

#topbarRight input[type="file"],
.modalCard input[type="file"]{
	width: auto;
	max-width: 260px;
}

#topbarRight button,
.modalCard button,
.postItemBarButton,
.topbarMenuSection button,
#topbarMenuBtn{
	font-family: var(--font-mono);
	background: var(--button-bg);
	color: var(--button-fg);
	border: var(--border-1) solid var(--button-border);
	border-radius: var(--radius-button);
	padding: var(--button-pad-y) var(--button-pad-x);
	cursor: pointer;
}

.passwordRevealBtn{
	position: absolute;
	top: 50%;
	right: var(--len-1);
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	min-height: 30px;
	padding: 0;
	line-height: 1;
	z-index: 1;
	background: transparent;
	border: 0;
	color: var(--white);
	font-family: inherit;
	font-size: 1rem;
}

.passwordFieldRow{
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
}

.passwordFieldRow input{
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding-right: 42px;
}

.passwordFieldRow .passwordRevealBtn{
	flex: 0 0 auto;
}

.topPasswordFieldRow{
	width: var(--auth-input-w);
}

#topUserLabel{
	color: var(--white);
}

.topbarMobileTools{
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
}

#topbarMenuBtn{
	min-width: 72px;
}

#topbarMenuPanel{
	position: absolute;
	top: calc(100% + var(--len-2));
	right: 0;
	width: max-content;
	min-width: var(--menu-panel-min-w);
	max-width: min(320px, calc(100vw - (var(--topbar-pad-x) * 2)));
	background: var(--gray20);
	border: var(--border-1) solid var(--gray30);
	border-radius: var(--radius-2);
	padding: var(--len-3);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.topbarMenuSection{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--len-2);
}

.topbarMenuSection input{
	width: 100%;
}

.topbarMenuButtons{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--len-2);
}

#app{
	position: relative;
	margin-top: var(--topbar-h);
	min-height: calc(100vh - var(--topbar-h));
	display: flex;
	align-items: stretch;
	justify-content: center;
}

#feed{
	width: calc(100% * var(--feed-width-ratio));
	height: calc(100vh - var(--topbar-h));
	max-width: 100%;
	padding: var(--feed-pad);
	padding-bottom: calc(var(--feed-pad) + var(--footer-h));
	overflow-y: auto;
	overflow-x: hidden;
}

#feed[data-direction="horizontal"]{
	width: 100%;
	height: calc((100vh - var(--topbar-h)) * var(--feed-height-ratio));
	align-self: center;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

#feed img{
	display: block;
	max-width: 100%;
	height: auto;
}

#feed[data-direction="horizontal"] img{
	display: inline-block;
	height: 100%;
	width: auto;
	max-width: none;
	margin-right: var(--feed-gap);
}

#feed[data-source="userpages"],
#feed[data-source="pagefiles"]{
	display: flex;
	flex-direction: column;
	gap: var(--feed-gap);
}

.pageCard{
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--page-card-gap);
	padding: var(--page-card-pad);
	background: var(--gray20);
	color: var(--white);
	border: var(--border-1) solid var(--gray30);
	border-radius: var(--radius-2);
	font-family: var(--font-mono);
	text-align: left;
	cursor: pointer;
}

.pageCardIcon{
	width: var(--page-card-icon-size);
	height: var(--page-card-icon-size);
	flex: 0 0 var(--page-card-icon-size);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gray10);
	border: var(--border-1) solid var(--gray30);
	border-radius: var(--radius-1);
	color: var(--white);
}

.pageCardText{
	min-width: 0;
}

.pageCardTitle{
	color: var(--white);
	font-size: 1.1rem;
	line-height: 1.2;
	word-break: break-word;
}

.pageCardSub{
	color: var(--white);
	opacity: 0.8;
	font-size: 0.9rem;
	line-height: 1.2;
	word-break: break-word;
	margin-top: 2px;
}

.pageCardNotice{
	cursor: default;
}

.postItem{
	width: 100%;
	background: var(--gray20);
	color: var(--white);
	border: var(--border-1) solid var(--gray30);
	border-radius: var(--radius-2);
	padding: var(--post-pad);
}

.postItemBody{
	width: 100%;
	cursor: pointer;
}

.postItemBody:focus{
	outline: var(--border-1) solid var(--white);
	outline-offset: var(--len-2);
	border-radius: var(--radius-1);
}

.postText{
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: var(--font-mono);
	color: var(--white);
	background: var(--gray10);
	border: var(--border-1) solid var(--gray30);
	border-radius: var(--radius-1);
	padding: var(--post-pad);
}

.postImage{
	display: block;
	width: 100%;
	height: auto;
	background: var(--gray10);
	border: var(--border-1) solid var(--gray30);
	border-radius: var(--radius-1);
}

.postItemBar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--post-gap);
	margin-top: var(--post-gap);
	padding-top: var(--len-2);
	border-top: var(--border-1) solid var(--gray30);
	flex-wrap: wrap;
}

.postItemBarText{
	min-width: 0;
	color: var(--white);
	opacity: 0.85;
	font-size: 0.95rem;
	line-height: 1.2;
	word-break: break-word;
}

.postItemBarActions{
	display: flex;
	align-items: center;
	gap: var(--len-2);
	flex-wrap: wrap;
}

#footer{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 15;
	background: var(--page-bg);
	border-top: var(--border-1) solid var(--gray30);
}

#footerInner{
	min-height: var(--footer-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--len-3);
	padding: 0 var(--topbar-pad-x);
	color: var(--white);
	font-size: 0.9rem;
}

#footerInner a{
	color: var(--white);
	text-decoration: none;
}

#modalOverlay[hidden]{
	display: none;
}

#modalOverlay{
	position: fixed;
	inset: 0;
	z-index: 30;
	background: rgba(0, 0, 0, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--len-4);
}

.modalCard[hidden]{
	display: none;
}

.modalCard{
	width: min(420px, 100%);
	background: var(--gray20);
	color: var(--white);
	border: var(--border-1) solid var(--gray30);
	border-radius: var(--radius-2);
	padding: var(--len-4);
}

.modalCard[data-modal="detailView"]{
	width: min(760px, 100%);
	max-height: calc(100vh - (var(--len-4) * 2));
	overflow-y: auto;
}

.modalHead{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--len-3);
	margin-bottom: var(--len-4);
}

.modalTitle{
	font-size: 1.1rem;
	line-height: 1.2;
	word-break: break-word;
}

.modalFields{
	display: flex;
	flex-direction: column;
	gap: var(--len-3);
}

.modalFields pre{
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: var(--font-mono);
	color: var(--white);
	background: var(--gray10);
	border: var(--border-1) solid var(--gray30);
	border-radius: var(--radius-1);
	padding: var(--post-pad);
	overflow: auto;
}

.modalFields img{
	display: block;
	width: 100%;
	height: auto;
	background: var(--gray10);
	border: var(--border-1) solid var(--gray30);
	border-radius: var(--radius-1);
}

.modalFields a{
	color: var(--white);
	word-break: break-word;
}

.modalFields > .pageCardSub{
	margin-top: 0;
}

.modalFields table{
	width: 100%;
	border-collapse: collapse;
}

.modalFields td{
	padding: var(--len-2) 0;
	vertical-align: top;
	word-break: break-word;
}

.modalFields td:first-child{
	width: 90px;
	padding-right: var(--len-3);
	opacity: 0.8;
}

.modalActions{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--len-2);
	margin-top: var(--len-4);
	flex-wrap: wrap;
}

@media (max-width: 768px){
	#topbar{
		position: sticky;
		top: 0;
	}

	#topbarInner{
		align-items: flex-start;
	}

	#brand{
		align-items: flex-start;
		max-width: calc(100% - 90px);
	}

	#brandText{
		font-size: 1.15rem;
	}

	#topbarRight{
		flex: 0 0 auto;
		width: auto;
		align-items: flex-start;
		justify-content: flex-end;
	}

	#app{
		margin-top: 0;
		min-height: auto;
		display: block;
	}

	#feed{
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: 0;
		overflow: visible;
		padding-left: var(--len-2);
		padding-right: var(--len-2);
	}

	#feed[data-direction="horizontal"]{
		width: 100%;
		height: calc((100vh - var(--topbar-h)) * var(--feed-height-ratio));
		overflow-x: auto;
		overflow-y: hidden;
		margin-top: calc((100vh - var(--topbar-h) - ((100vh - var(--topbar-h)) * var(--feed-height-ratio))) / 2);
		margin-bottom: calc((100vh - var(--topbar-h) - ((100vh - var(--topbar-h)) * var(--feed-height-ratio))) / 2);
	}

	.pageCard,
	.postItem{
		width: 100%;
	}

	.modalCard{
		width: min(100%, 420px);
	}

	.modalCard[data-modal="detailView"]{
		width: 100%;
		max-height: calc(100vh - (var(--len-4) * 2));
	}
}