@import url("theme.css");

/* =====================================
   NOTE TO DEVELOPERS
-----------------------------------------

This file defines COMPONENTS and LAYOUT.

Do NOT hardcode:

• Colors
• Fonts
• Shadows
• Border Radius
• Theme Dimensions
• Animation Timing

These belong in theme.css.

===================================== */

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

/* =====================================
   Base
===================================== */

body{

	font-family:var(--font);
	color:var(--text);

	background-color:var(--background);

	background-image:
		url("/assets/images/chem-background.png");

	background-repeat:no-repeat;
	background-position:center;
	background-size:min(1800px,100vw);
	background-attachment:fixed;

	overflow-x:hidden;
	overflow-y:auto;

}

/* =====================================
   Header
===================================== */


header{

	position:fixed;

	top:0;
	left:0;

	width:100%;
	height:var(--header-height);

	display:grid;
	grid-template-columns:auto 1fr auto;

	align-items:center;

	padding:0 var(--header-padding);

	background:var(--header-bg);

	border-bottom:1px solid var(--border);
	
	z-index: 2;

}

.logo a{

	display:flex;
	align-items:center;
	gap:12px;

	text-decoration:none;

}

.wpi-seal{
	margin-left:12px;
	height:32px;
	width:auto;

	flex-shrink:0;

}

.wpipredict-logo{

	height:var(--logo-height);
	width:auto;

}

/* =====================================
   Logo
===================================== */

.logo{

	display:flex;
	align-items:center;

}

.logo img{

	display:block;

	height:var(--logo-height);
	width:auto;

}

/* =====================================
   Navigation
===================================== */

nav{

	display:flex;
	justify-content:flex-end;
	align-items:center;

	flex:1;

	margin-left:40px;

}

nav ul{

	display:flex;
	list-style:none;
	gap:10px;
	margin:0;
	padding:0;
	align-items:center;

}

/* =====================================
   Navigation Links
===================================== */

nav a,
.nav-button{

	display:flex;
	align-items:center;
	justify-content:center;

	height:48px;

	padding:0 10px;

	background:transparent;
	border:none;
	border-radius:0;

	color:var(--text);

	text-decoration:none;

	font:inherit;
	font-size:1.08rem;
	font-weight:600;

	cursor:pointer;

	position:relative;

	text-shadow:
		0 1px 0 rgba(255,255,255,.90),
		0 -1px 1px rgba(0,0,0,.12);

	transition:
		color .20s ease,
		transform .20s ease,
		text-shadow .20s ease;

}

/* Hover */

nav a:hover,
.nav-button:hover{

	color:var(--primary);

	transform:
		translateY(-2px)
		scale(1.04);

	text-shadow:
		0 1px 0 #ffffff,
		0 2px 2px rgba(0,0,0,.18),
		0 6px 12px rgba(0,0,0,.22);

}

/* Active */

nav a.active,
.nav-button.active{

	color:var(--primary);

	text-shadow:
		0 1px 0 #ffffff,
		0 2px 2px rgba(0,0,0,.22),
		0 8px 14px rgba(180,38,38,.20);

}

/* Click */

nav a:active,
.nav-button:active{

	transform:
		translateY(0)
		scale(.98);

}

/* =====================================
   Main
===================================== */

main{
	max-width:1100px;
	margin:0 auto;

	padding:
		calc(var(--header-height) + 1px)
		24px
		calc(var(--footer-height) + 17px);
}

/* =====================================
   Application Window
===================================== */

.app-window{
	width:100%;

	background:var(--surface);

	border:1px solid var(--border);
	border-radius:var(--radius);

	overflow:hidden;

	box-shadow:var(--shadow);
}

/* --- Title Bar --- */

.window-title{
	padding:var(--window-title-padding);

	background:var(--window-title-bg);

	border-bottom:1px solid var(--border);

	font-size:1.2rem;
	font-weight:600;
}

/* --- Body --- */

.window-body{
	padding:var(--window-padding);

	display:flex;
	flex-direction:column;

	gap:var(--form-gap);
}

/* =====================================
   Homepage Content
===================================== */

.hero{
	width:min(900px,95vw);
	margin:8px auto 0;

	display:flex;
	flex-direction:column;
	gap:18px;
}

.intro{
	display:flex;
	flex-direction:column;
	gap:10px;

	padding:26px;

	background:rgba(255,255,255,.92);
	backdrop-filter:blur(8px);

	border:1px solid var(--border);
	border-radius:var(--radius);

	box-shadow:var(--shadow);
}

.intro h1{
	font-size:2.4rem;
	color:var(--primary);

	margin:0;
}

.tagline{
	font-size:1.15rem;
	font-weight:600;

	color:var(--muted);
}

.intro p{
	line-height:1.65;
	max-width:760px;
}

.example{
	margin-top:8px;
	padding-top:12px;

	border-top:1px solid var(--border);

	font-size:.95rem;
	color:var(--muted);
}

.example code{
	font-family:var(--font-mono);
	background:rgba(0,0,0,.05);
	padding:2px 6px;
	border-radius:6px;
}

.information{
	width:min(900px,95vw);
	margin:24px auto 0;
}

.info-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
}

.info-box{
	display:flex;
	flex-direction:column;
	
	padding:22px;
	background:rgba(255,255,255,.92);
	border:1px solid var(--border);
	border-radius:var(--radius);
	backdrop-filter:blur(8px);
}

.prediction-grid .info-box h2{

	margin-top:2px;

}

.info-box > :first-child{

	margin-bottom:16px;

}

.info-box h2{
	margin-bottom:14px;
	color:var(--primary);
}

.info-box ol,
.info-box ul{
	margin-left:20px;
	line-height:1.7;
}

.seo{
	margin-top:20px;
	padding-top:20px;
	border-top:1px solid var(--border);
	line-height:1.7;
	color:var(--muted);
}

/* =====================================
   Form
===================================== */

/* --- Input Group --- */

.input-group{
	display:flex;

	width:100%;

	background:var(--surface);

	border:1px solid var(--border);
	border-radius:var(--radius);

	overflow:hidden;

	transition:var(--transition);
}

.input-group input{
	flex:1;

	height:var(--control-height);

	padding:0 16px;

	border:none;
	outline:none;

	background:transparent;

	color:var(--text);

	font-family:var(--font-mono);
	font-size:.95rem;
}

.input-group input::placeholder{
	color:var(--muted);
	font-family:var(--font);
}

/* --- Input Focus --- */

.input-group:focus-within{
	border-color:var(--primary);
	box-shadow:var(--focus-ring);
}

/* --- Select --- */

select{
	width:100%;
	height:var(--control-height);

	padding:0 48px 0 16px;

	background:var(--surface);

	color:var(--text);

	border:1px solid var(--border);
	border-radius:var(--radius);

	outline:none;

	cursor:pointer;

	font:inherit;

	transition:var(--transition);

	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;

	/* SVG cannot currently use CSS variables */

	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23475569' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 5.5L8 10.3l4.8-4.8.9.9L8 12.1 2.3 6.4z'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 16px center;
}

select:hover{
	border-color:var(--draw-hover);
}

select:focus{
	border-color:var(--primary);
	box-shadow:var(--focus-ring);
}

/* --- Buttons --- */

.draw,
.run{
	font-family:var(--font);
	font-weight:600;

	cursor:pointer;

	transition:var(--transition);
}

.draw{
	width:180px;

	background:var(--draw);
	color:var(--text);

	border:none;
	border-left:1px solid var(--border);
}

.draw:hover{
	background:var(--draw-hover);
}

.run{
	height:var(--control-height);

	background:var(--primary);
	color:var(--button-text);

	border:none;
	border-radius:var(--radius);
}

.run:hover{
	background:var(--primary-hover);
}

.draw:focus-visible,
.run:focus-visible{
	box-shadow:var(--focus-ring);
}

/* =====================================
   Footer
===================================== */

footer{

	position:fixed;

	bottom:0;
	left:0;

	width:100%;
	height:var(--footer-height);

	display:grid;
	grid-template-columns:1fr auto 1fr;

	align-items:center;

	padding:0 var(--footer-padding);

	background:var(--surface);

	border-top:1px solid var(--border);

	color:var(--muted);

	font-size:.9rem;

}

footer span{

	display:flex;
	align-items:center;

	position:relative;
	top:2px;

}

#version{

	justify-self:start;
	justify-content:flex-start;

}

.footer-center{

	justify-self:center;

}

.footer-center a{

	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;

	color:inherit;
	text-decoration:none;

}

.footer-center a:hover{

	text-decoration:underline;

}

.footer-center a:focus-visible{

	outline:2px solid var(--primary);
	outline-offset:4px;
	border-radius:4px;

}

.footer-right{

	justify-self:end;
	justify-content:flex-end;

}

/* =====================================
   JSME Modal
===================================== */

.hidden{
	display:none !important;
}

.modal{
	position:fixed;
	inset:0;

	display:flex;
	justify-content:center;
	align-items:center;

	background:rgba(0,0,0,.35);

	z-index:1000;
}

.modal-window{

	width:760px;
	max-width:95vw;

	background:var(--surface);

	border-radius:var(--radius);

	box-shadow:var(--shadow);

	overflow:hidden;

	display:flex;
	flex-direction:column;
}

.modal-header{

	display:flex;
	justify-content:space-between;
	align-items:center;

	padding:18px 24px;

	background:var(--window-title-bg);

	border-bottom:1px solid var(--border);
}

.modal-close{

	background:none;
	border:none;

	font-size:1.6rem;

	cursor:pointer;
}

.modal-body{
	flex:1;
	padding:16px;
}

#jsme_container{

	width:100%;
	max-width:700px;
	height:50vh;

	margin:0 auto;

	border:1px solid var(--border);
	border-radius:var(--radius);

	overflow:hidden;
}

.modal-footer{

	display:flex;
	justify-content:flex-end;
	gap:12px;

	padding:20px 24px;

	border-top:1px solid var(--border);

}
.modal-footer button{

	width:110px;
	height:42px;

	border:none;
	border-radius:var(--radius);

	font-family:var(--font);
	font-weight:600;

	cursor:pointer;

	transition:var(--transition);

}

#cancelJsme{

	background:var(--draw);
	color:var(--text);

}

#cancelJsme:hover{

	background:var(--draw-hover);

}

#applyJsme{

	background:var(--primary);
	color:var(--button-text);

}

#applyJsme:hover{

	background:var(--primary-hover);

}

/* =====================================
   Accessibility
===================================== */

.sr-only{

	position:absolute;

	width:1px;
	height:1px;

	padding:0;
	margin:-1px;

	overflow:hidden;

	clip:rect(0,0,0,0);

	white-space:nowrap;

	border:0;

}

/* --- Skip to Main Content --- */

.skip-link {
	position: absolute;
	top: -100px;
	left: 20px;
	background: var(--primary);
	color: var(--button-text);
	padding: 12px 24px;
	border-radius: 0 0 var(--radius) var(--radius);
	font-weight: 600;
	text-decoration: none;
	z-index: 9999;
	box-shadow: var(--shadow);
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 0;
	outline: var(--focus-ring-outline);
	outline-offset: var(--focus-ring-offset);
}

/* --- Focus States for Keyboard Navigation --- */

a:focus,
button:focus,
select:focus,
textarea:focus,
input:focus {
	outline: none;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
	outline: var(--focus-ring-outline) !important;
	outline-offset: var(--focus-ring-offset) !important;
}

nav a:focus-visible,
.logo:focus-visible,
.logo a:focus-visible {
	outline: var(--focus-ring-outline) !important;
	outline-offset: -2px !important;
	border-radius: var(--radius);
}

.team-links a:focus-visible {
	outline: var(--focus-ring-outline) !important;
	outline-offset: 2px !important;
}

.downloads-table tr a:focus-visible {
	outline: var(--focus-ring-outline) !important;
	outline-offset: 2px !important;
}

/* =====================================
   Validation
===================================== */

.validation{

	min-height:20px;
	font-size:.9rem;
	font-weight:500;

}

.validation.success{

	color:#16a34a;

}

.validation.error{

	color:#dc2626;

}

/* =====================================
   Prediction Modal
===================================== */

#predictionModal .modal-window{

	width:600px;
	max-width:90vw;

}

#predictionModal .modal-body{

	max-height:400px;
	overflow-y:auto;

}

#outputContent{

	font-family:var(--font-mono);
	line-height:1.8;
	white-space:pre-wrap;

}

/* =====================================
   Team
===================================== */

.team-section{
	width:min(1000px,95vw);
	margin:24px auto;
}

.team-section h1{
	margin-bottom:12px;
	color:var(--primary);
}

.team-section > p{
	margin-bottom:28px;
	line-height:1.7;
	max-width:800px;
}

.team-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:20px;
}

.team-card{
	padding:24px;
	background:rgba(255,255,255,.92);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
}

.team-card h3{
	margin-bottom:8px;
	font-size:1.2rem;
}

.team-title{
	color:var(--muted);
	font-weight:600;
}

/* Team Photo */

.team-photo{
	width:120px;
	height:120px;

	margin:0 auto 18px;

	border-radius:50%;

	overflow:hidden;

	background:#f3f4f6;

	border:2px solid var(--border);

	box-shadow:0 6px 16px rgba(0,0,0,.10);
}

.team-photo img{
	width:100%;
	height:100%;

	display:block;

	object-fit:cover;
	object-position:center;
}

.team-photo.placeholder::after{
	content:"Coming Soon";

	display:flex;
	align-items:center;
	justify-content:center;

	width:100%;
	height:100%;

	color:var(--muted);
	font-size:.85rem;
}

/* Categories */

.team-category{
	margin:48px 0 20px;

	padding-bottom:10px;

	border-bottom:2px solid var(--border);

	color:var(--primary);

	font-size:1.6rem;
}

/* Team Introduction */

.team-intro{
	margin-bottom:36px;
}

.team-intro h1{
	margin-bottom:10px;
	color:var(--primary);
	font-size:2.5rem;
}

.team-tagline{
	margin-bottom:16px;

	font-size:1.1rem;
	font-weight:600;

	color:var(--primary);
}

.team-intro p{
	line-height:1.7;
}

/* Team Description */

.team-description{

	margin-top:12px;

	line-height:1.6;

	color:var(--muted);

	font-size:.95rem;

}

/* Team Links */

.team-links{

	display:flex;
	flex-direction:column;

	gap:8px;

	margin-top:18px;

	padding-top:16px;

	border-top:1px solid var(--border);

}

.team-links a{

	color:var(--primary);

	font-weight:600;

	text-decoration:none;

	transition:var(--transition);

}

.team-links a:hover{

	text-decoration:underline;

}

/* =====================================
   Homepage Hero
===================================== */

.home-hero{

	margin-bottom:24px;

}

.home-hero h1{

	margin-bottom:6px;

	font-size:2.7rem;

	line-height:1.1;

}

.home-hero .team-tagline{

	margin-bottom:0;

	font-size:1.05rem;

	color:var(--muted);

}

/* =====================================
   Research Downloads
===================================== */

.downloads-table a{

	color:var(--primary);

	font-weight:600;

	text-decoration:none;

	transition:var(--transition);

}


.downloads-table a:hover{

	text-decoration:underline;

}


.downloads-table a:focus-visible{

	outline:var(--focus-ring-outline);

	outline-offset:4px;

	border-radius:4px;

}

.downloads-table{

	width:100%;

	margin-top:18px;

	border-collapse:collapse;

}

.downloads-table th{

	padding:14px;

	text-align:left;

	background:rgba(0,0,0,.04);

	color:var(--primary);

	border-bottom:1px solid var(--border);

}

.downloads-table td{

	padding:14px;

	border-bottom:1px solid var(--border);

}

.downloads-table tr:last-child td{

	border-bottom:none;

}

.downloads-table tr:hover{

	background:rgba(0,0,0,.025);

}



@media (max-width:768px){

	header{

		padding:0 16px;

	}

	nav ul{

		gap:16px;

	}

	nav a{

		font-size:.9rem;

	}

	.app-window{

		width:min(95vw,700px);

	}

	.input-group{

		flex-direction:column;

	}

	.draw{

		width:100%;

		border-left:none;
		border-top:1px solid var(--border);

	}

	footer{

		flex-direction:column;
		justify-content:center;

		gap:6px;
		height:auto;
		padding:14px;

	}

	.modal-window{

		width:95vw;
		height:90vh;

	}

	#jsme_container{

		width:100%;
		height:340px;

	}

}

/* =====================================
   Workbench
===================================== */

.info-grid{

	align-items:stretch;

}

.info-grid .info-box{

	display:flex;
	flex-direction:column;

}

textarea{

	width:100%;
	min-height:120px;

	padding:12px;

	margin-top:10px;
	margin-bottom:16px;

	resize:vertical;

	background:var(--surface);

	border:1px solid var(--border);
	border-radius:var(--radius);

	color:var(--text);

	font-family:var(--font-mono);
	font-size:.95rem;
	line-height:1.6;

	outline:none;

	transition:var(--transition);

}

textarea::placeholder{

	color:var(--muted);
	font-family:var(--font);

}

textarea:hover{

	border-color:var(--draw-hover);

}

textarea:focus{

	border-color:var(--primary);
	box-shadow:var(--focus-ring);

}

/* =====================================
   SMILES Actions
===================================== */

.smiles-actions{

    display:grid;

    grid-template-columns:160px 1fr;

    gap:12px;

    margin-top:12px;

}

.smiles-actions .draw{

    width:100%;

    height:var(--control-height);

    border:none;

    border-radius:var(--radius);

}

.smiles-actions .run{

    width:100%;

    height:var(--control-height);

}

/* =====================================
   Prediction Settings
===================================== */

.settings-content{

	display:flex;
	flex-direction:column;

	gap:20px;

	flex:1;

}

.settings-group{

	display:flex;
	flex-direction:column;

	gap:8px;

}

.settings-group h3{

	margin:0;

	color:var(--text);

	font-size:1rem;
	font-weight:600;

}

.settings-group label{

	display:flex;
	align-items:center;

	gap:8px;

	cursor:pointer;

}

.settings-group + .settings-group{

	padding-top:18px;

	border-top:1px solid var(--border);

}

.parameter-row{

	display:flex;
	align-items:center;

	gap:10px;

	margin-top:6px;

}

.parameter-row input{

	flex:1;
	text-align: right;
	height:var(--control-height);

	padding:0 16px;

	background:var(--surface);

	border:1px solid var(--border);
	border-radius:var(--radius);

	color:var(--text);

	font:inherit;

	outline:none;

	transition:var(--transition);

}

.parameter-row input:hover{

	border-color:var(--draw-hover);

}

.parameter-row input:focus{

	border-color:var(--primary);

	box-shadow:var(--focus-ring);

}

.parameter-unit{

	font-weight:600;

	color:var(--muted);

	min-width:18px;

}

/* =====================================
   Prediction Results
===================================== */

.results-container{

	max-height:420px;

	overflow-y:auto;

	margin-top:18px;

	border:1px solid var(--border);

	border-radius:var(--radius);

}

.results-container .downloads-table{

	margin-top:0;

}

.results-container thead th{

	position:sticky;

	top:0;

	background:var(--surface);

	z-index:1;

}

/* =====================================
   Prediction Workflow
===================================== */

.prediction-grid{

	display:grid;

	grid-template-columns:1fr;

	gap:20px;

	margin-top:20px;

	align-items:stretch;

}

.prediction-grid .info-box{

	margin-top:0;
	height:100%;

}


/* =====================================
   Prediction Status Messages
===================================== */

.downloads-table td:last-child{

	white-space:pre-wrap;

	overflow-wrap:anywhere;

	min-width:260px;

}

/* =====================================
   Results Actions
===================================== */

.results-actions{

	display:flex;

	justify-content:center;

	align-items:center;

	gap:14px;

	margin-top:18px;

	flex-wrap:wrap;

}

.results-actions button{

	flex:0 0 160px;

	height:44px;

}
/* =====================================
   Dataset Drop Zone
===================================== */

.dataset-dropzone{

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	gap:10px;

	min-height:120px;

	padding:16px;

	border:2px dashed var(--border);

	border-radius:var(--radius);

	background:rgba(255,255,255,.65);

	text-align:center;

	transition:var(--transition);

	cursor:pointer;

}


.dataset-dropzone:hover,
.dataset-dropzone.drag-over{

	border-color:var(--primary);

	background:rgba(180,38,38,.06);

}


.upload-icon{

	font-size:2.2rem;

	line-height:1;

}


.upload-title{

	margin:0;

	font-size:1rem;

	font-weight:700;

	color:var(--text);

}


.upload-subtitle{

	margin:0;

	color:var(--muted);

	font-size:.9rem;

}


#selectedFile{

	font-weight:600;

	color:var(--primary);

	font-size:.9rem;

}

.drag-over{

	border-color:var(--primary) !important;

	background:rgba(180,38,38,.08);

	box-shadow:var(--focus-ring);

	transition:var(--transition);

}

/* =====================================
   Prediction Panel
===================================== */

.prediction-run{

	display:flex;

	flex-direction:column;

	justify-content:center;

	align-items:center;

	flex:1;

	gap:18px;

	cursor:default;

}

.prediction-run:hover{

	border-color:var(--border);

	background:rgba(255,255,255,.65);

}

.prediction-run .run{

	width:100%;

	max-width:180px;

	margin-top:auto;

}

/* =====================================
   Research Document Type
===================================== */

.downloads-table td:last-child{

	text-align:center;

	width:100px;

	font-weight:700;

	font-size:0.9rem;

}

/* =====================================
   Research Publications Table
===================================== */

table.downloads-table{

	width:100%;

}

.research-downloads{

	table-layout:fixed;

}

.research-downloads th:first-child,
.research-downloads td:first-child{

	width:75%;

}

.research-downloads th:last-child,
.research-downloads td:last-child{

	width:25%;

	text-align:center;

	vertical-align:middle;

}

/* =====================================
   Dataset Upload Button
===================================== */

.dataset-dropzone .draw{

	width:180px;

	height:var(--control-height);

	border:none;

	border-radius:var(--radius);

	background:var(--draw);

	color:var(--text);

}


.dataset-dropzone .draw:hover{

	background:var(--draw-hover);

}

/* =====================================
   Input Labels
===================================== */

.input-label{

	margin-top:16px;

	display:block;

	font-weight:700;

	color:var(--text);

}


.input-help{

	margin-top:16px;

	margin-bottom:8px;

	color:var(--muted);

	font-size:.9rem;

	font-weight:600;

}

/* =====================================
   SMILES Input Group
===================================== */

.smiles-input-group{

    display:flex;

    flex-direction:column;

    width:100%;

}

.smiles-input-group textarea{

    margin:0;

}


/* =====================================
   SMILES Group Focus Styling
===================================== */

.smiles-input-group textarea:focus,
.smiles-input-group textarea:focus-visible{

	outline:none !important;

	border-color:var(--primary);

	box-shadow:var(--focus-ring);

}


.smiles-input-group textarea:hover{

	border-color:var(--border);

}

/* =====================================
   Input Divider
===================================== */

.input-divider{

	display:flex;

	align-items:center;

	justify-content:center;

	margin:20px 0;

	color:var(--muted);

	font-weight:700;

}


.input-divider::before,
.input-divider::after{

	content:"";

	flex:1;

	height:1px;

	background:var(--border);

}


.input-divider span{

	padding:0 14px;

}

/* =====================================
   Workflow Steps
===================================== */

.step-label{

	margin:
		-22px
		-22px
		20px;

	padding:12px 20px;

	background:var(--primary);

	color:var(--button-text);

	font-size:.80rem;
	font-weight:700;

	text-transform:uppercase;
	letter-spacing:.12em;

	border-radius:
		var(--radius)
		var(--radius)
		0
		0;

}

/* =====================================
   Model Configuration Placeholder
===================================== */

.model-placeholder{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:18px;

    margin-top:4px;

    border:1px dashed var(--border);

    border-radius:var(--radius);

    background:rgba(0,0,0,.02);

    color:var(--muted);

    line-height:1.6;

}

.model-placeholder-title{

    margin:0;

    font-weight:700;

    color:var(--text);

}

.model-placeholder ul{

    margin:0;

    padding-left:20px;

}

.model-placeholder-footer{

    margin-top:auto;

    padding-top:14px;

    border-top:1px solid var(--border);

    font-size:.9rem;

}

/* =====================================
   Status Window
===================================== */

.status-window{

    position:fixed;

    top:50%;
    left:50%;

    transform:
        translate(-50%, -50%);

    min-width:340px;
    max-width:500px;

    padding:24px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    text-align:center;

    z-index:5000;

    opacity:0;

    transition:
        opacity .25s ease,
        transform .25s ease;

}

.status-window.visible{

    opacity:1;

    transform:
        translate(-50%, -50%) scale(1);

}

.status-message{

    font-size:1.05rem;

    font-weight:600;

    color:var(--text);

}

/* =====================================
   Publication Cards
===================================== */

.publication-list{

    display:flex;

    flex-direction:column;

    gap:24px;

    margin-top:24px;

}

.publication-card{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:24px;

    align-items:center;

    padding:24px;

    border:1px solid var(--border);

    border-radius:var(--radius);

    background:rgba(255,255,255,.65);

}

.publication-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.publication-image img{

    width:100%;

    border-radius:var(--radius);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

.publication-content{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.publication-content h3{

    margin:0;

    color:var(--primary);

    line-height:1.35;

}

.publication-authors{

    margin:0;

    font-weight:600;

}

.publication-journal{

    margin:0;

    color:var(--muted);

}

.publication-actions{

    display:flex;

    gap:12px;

    margin-top:8px;

}

.publication-actions .draw{

    display:flex;

    justify-content:center;

    align-items:center;

    width:120px;

    height:42px;

    text-decoration:none;

    border-radius:var(--radius);

}

@media (max-width:800px){

    .publication-card{

        grid-template-columns:1fr;

    }

}