:root{
	font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:#29382e;
	background:#fff;
	font-synthesis:none;
	line-height:1.5;
	--green:#42594b;
	--bone:#fff;
	--muted:#6c756e
}

*{
	box-sizing:border-box
}

body{
	margin:0
}

button,input,textarea,select{
	font:inherit
}

button,a,input,textarea,select{
	-webkit-tap-highlight-color:transparent
}
a{
	color:var(--green);
	text-underline-offset:4px
}

button{
	cursor:pointer
}

header{
	padding:18px 5vw;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px
}

header[hidden]{
	display:none
}

nav{
	display:flex;
	gap:25px
}

nav a{
	text-decoration:none;
	font-weight:600;
	font-size:14px
}

.text-button{
	border:0;
	background:none;
	color:var(--green);
	padding:5px;
	font-size:14px
}

main{
	max-width:1000px;
	margin:54px auto 0;
	padding:0 24px
}

.brand{
	display:flex;
	justify-content:center;
	margin:0 auto 15px
}

.brand img{
	display:block
}

.panel{
	max-width:470px;
	margin:0 auto;
	background:var(--bone);
	padding:32px;
	border-radius:14px;
	border:1px solid #e8e4da
}

.panel.wide{
	max-width:100%
}

h1{
	font-size:25px;
	line-height:1.2;
	margin:0 0 10px;
	font-family:Georgia,serif
}

p.help{
	font-size:14px;
	color:var(--muted);
	margin:0 0 25px
}

label{
	display:block;
	font-size:14px;
	font-weight:600;
	margin-top:18px
}

input:not([type=checkbox]),textarea,select{
	display:block;
	width:100%;
	margin-top:7px;
	border:1px solid #d4d8cf;
	background:#fff;
	border-radius:7px;
	padding:11px 13px;
	color:#29382e
}

input:focus,textarea:focus,select:focus{
	outline:2px solid #8ca38d;
	outline-offset:2px
}

textarea{
	min-height:200px;
	resize:vertical
}

.code-input{
	font-family:ui-monospace,monospace;
	min-height:300px
}

input[type=checkbox]{
	accent-color:var(--green)
}

label.check{
	display:flex;
	gap:9px;
	align-items:center;
	font-weight:400
}

.primary{
	background:var(--green);
	color:white;
	border:0;
	border-radius:7px;
	padding:12px 22px;
	font-weight:600;
	margin-top:24px;
	width:100%
}

.primary:hover{
	background:#314739
}

button:disabled{
	opacity:.55;
	cursor:wait
}

.switch{
	text-align:center;
	font-size:14px;
	margin:25px 0 0
}

.error{
	color:#923923;
	font-size:14px;
	white-space:pre-line
}

.error:empty{
	display:none
}

#notice{
	text-align:center;
	color:var(--green);
	font-size:14px;
	margin-bottom:18px
}

#notice:empty{
	display:none
}

.search-wrap{
	position:relative;
	margin-bottom:30px
}

.search-wrap input{
	padding:16px 20px 16px 43px;
	background:#fafaf7;
	border-radius:10px;
}

.search-wrap span{
	position:absolute;
	left:17px;
	top:13px;
	font-size:20px
}

.stash{
	position:relative;
	background:var(--bone);
	border:1px solid #eae5d9;
	border-radius:11px;
	padding:22px 24px;
	margin-bottom:17px;
	overflow-wrap:anywhere
}

.stash-meta{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	padding-right:28px;
	color:#73786e;
	font-size:11px;
	letter-spacing:.02em;
	margin-bottom:16px
}

.badge{
	padding:2px 8px;
	border:1px solid #d9dfd1;
	border-radius:20px;
	color:#4a6350;
	font-size:10px;
	text-transform:uppercase
}

.delete{
	position:absolute;
	right:12px;
	top:12px;
	border:0;
	background:transparent;
	font-size:23px;
	color:#778172;
	width:32px;
	height:32px;
	border-radius:50%
}

.delete:hover{
	background:#e4dfd4;
	color:#8f382d
}

.stash p{
	margin:0;
	white-space:pre-wrap
}

.stash a{
	font-weight:600
}

.stash img{
	max-width:100%;
	max-height:520px;
	display:block;
	border-radius:6px;
	object-fit:contain
}

.stash pre{
	margin:0;
	overflow:auto;
	font-size:13px;
	tab-size:4;
	line-height:1.65
}

.stash pre code.hljs{
	padding:15px;
	border-radius:7px;
	/*background:#eeece4*/
}

.empty{
	text-align:center;
	padding:48px 20px;
	border:1px dashed #d8ddcf;
	border-radius:12px;
	color:var(--muted)
}

#more{
	display:block;
	margin:25px auto;
	border:1px solid #d4d8cf;
	background:white;
	border-radius:6px;
	padding:10px 24px
}

#more[hidden]{
	display:none
}

.back{
	display:inline-block;
	margin-bottom:22px;
	font-size:14px
}

@media(max-width:560px){
	main{
		margin-top:32px;
		padding:0 16px
	}
	
	.panel{
		padding:24px 20px
	}

	nav{
		gap:18px
	}
	
	header{
		padding:14px 18px
	}

	.stash{
		padding:20px 16px
	}
}

.panel h1{
	text-align:center
}

.account{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:12px;
	min-width:0
}

#identity{
	font-size:13px;
	overflow-wrap:anywhere;
	text-align:right
}

#logout{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	width:36px;
	height:36px
}

#logout svg{
	width:22px;
	height:22px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.8;
	stroke-linecap:round;
	stroke-linejoin:round
}

@media(max-width:560px){
	header{
		flex-wrap:wrap
	}

	.account{
		margin-left:auto
	}

	#identity{
		font-size:12px
	}
}