@font-face {
	font-family: AnimeAce;
	src: url('animeace2_reg.ttf') format('truetype');
	font-weight: normal;
  	font-style: normal;
}

@font-face {
	font-family: AnimeAce;
	src: url('animeace2_bld.ttf') format('truetype');
	font-weight: bold;
  	font-style: normal;
}

@font-face {
	font-family: AnimeAce;
	src: url('animeace2_ital.ttf') format('truetype');
	font-weight: normal;
  	font-style: italic;
}

:root{
	--bg:#0f1724;
	--text:#e6eef6;
	--muted:#9aa7b2;
	--accent:#7dd3fc;
	--accent-2:#a78bfa;
	--radius:8px;
	--max-width:980px;
	--gap:1rem;
}

*{
	box-sizing:border-box
}

html,body{
	height:100%;
	margin:0;
	font-family: AnimeAce, Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background: var(--bg);
	color:var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* Layout */
body > *{
	max-width:var(--max-width);
	margin:0 auto;
	padding:1.25rem;
}

header#navigation{
	margin-bottom:1rem;
}

/* Navigation */
ul{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	gap:1rem;
	align-items:center;
}

ul li a{ 
	color:var(--text);
	text-decoration:none;
	padding:0.25rem 0.5rem;
	border-radius:6px;
	transition:background .15s ease, color .15s ease, transform .08s ease;
}

ul li a:hover{ background: rgba(255,255,255,0.03); transform:translateY(-1px) }

/* Articles list */
.article-display{
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.03);
	padding:1rem;
	margin-bottom:1rem;
	border-radius:var(--radius);
}

.article-display header h2{
	margin:0 0 0.5rem 0;
	font-size:1.125rem;
}

.article-title-display{ color:var(--accent); font-weight:600 }

.article-tags-display, .article-date-display {
	color:var(--muted);
	font-size:0.9rem;
	margin:0.25rem 0;
}

.article-status-display{ color:var(--accent-2); font-size:0.85rem }

.article-actions { margin-top:0.5rem; }
.article-actions button { margin-left:0.5rem; margin-right:0.5rem; }

.editor-js-widget-wrapper {
	width: 800px;
	height: 800px;
	position: relative;
}

.editor-js-widget-wrapper iframe {
  	width: 100%;
  	height: 100%;
}

/* Article view */
#article-content{
	background:transparent;
	padding:0.5rem 0;
}
#article-content h1, #article-content h2, #article-content h3{
	color:var(--text);
	margin:0.6rem 0;
}
#article-content p{
	line-height:1.6;
	color:var(--text);
	margin:0.5rem 0;
}
#article-content blockquote{
	border-left:3px solid rgba(255,255,255,0.06);
	padding-left:1rem;
	color:var(--muted);
	margin:0.5rem 0;
}
#article-content img{ max-width:100%; border-radius:6px; display:block; margin:0.5rem 0 }

/* Buttons */
button, .btn {
	background:var(--accent);
	color:var(--bg);
	border:0;
	padding:0.5rem 0.75rem;
	border-radius:6px;
	cursor:pointer;
	text-decoration:none;
	font: inherit;
}

button:hover, .btn:hover {
	background: var(--accent-2);
	transform: translateY(-1px);
	transition: background .15s ease, transform .1s ease;
}

button.secondary{ background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.03) }

/* Forms */
input[type=text], textarea, .editorjs-container{
	width:100%;
	padding:0.6rem;
	border-radius:6px;
	border:1px solid rgba(255,255,255,0.04);
	background:rgba(255,255,255,0.01);
	color:var(--text);
}

input[type=password], textarea, .editorjs-container{
	width:100%;
	padding:0.6rem;
	border-radius:6px;
	border:1px solid rgba(255,255,255,0.04);
	background:rgba(255,255,255,0.01);
	color:var(--text);
}

/* Responsive */
@media (max-width:640px){
	:root{ --max-width:100%; padding:0 }
	body > *{ padding:0.75rem }
	ul{flex-wrap:wrap}
}

/* User card (dashboard) */
.user-card{
	display:flex;
	align-items:center;
	gap:0.75rem;
	background: rgba(255,255,255,0.02);
	border:1px solid rgba(255,255,255,0.03);
	padding:0.75rem;
	border-radius:10px;
	max-width:420px;
	margin-bottom:1rem;
}

.user-meta{ display:flex; flex-direction:column; gap:0.25rem }
.user-name{ font-weight:700; color:var(--text) }

@media (max-width:420px){
	.user-card{ flex-direction:row; gap:0.5rem }
	.user-avatar{ width:40px; height:40px }
}