:root{
	--bg: #0f1724;
	--card: #0b1220;
	--muted: #9aa4b2;
	--accent: #5eead4;
	--accent-2: #60a5fa;
	--danger: #fb7185;
	--surface-text: #e6eef8;
	--glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:linear-gradient(180deg,#071129 0%, #071a2a 100%); color:var(--surface-text); margin:0; padding:1.5rem}
.container{max-width:1100px;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.brand{display:flex;gap:0.75rem;align-items:center}
.logo{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:700;color:#04202a}
.title{font-size:1.125rem;font-weight:600}
.card{background:var(--card);border-radius:12px;padding:1rem;box-shadow:0 6px 18px rgba(2,6,23,0.6);}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1rem}
.stat{padding:1rem;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),var(--glass));}
.stat h3{margin:0;font-size:0.9rem;color:var(--muted)}
.stat p{margin:0.5rem 0 0;font-size:1.5rem;font-weight:700}
table{width:100%;border-collapse:collapse;margin-top:0.5rem}
thead th{font-weight:600;text-align:left;padding:0.6rem;border-bottom:1px solid rgba(255,255,255,0.04);color:var(--muted)}
tbody td{padding:0.6rem 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.actions{display:flex;gap:0.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0 .9rem;border-radius:8px;border:0;cursor:pointer;font-weight:700;height:42px}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04202a}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--surface-text)}
.btn-danger{background:linear-gradient(90deg,var(--danger),#ef4444);color:#fff}
.small{font-size:0.85rem;color:var(--muted)}
.notice{padding:0.5rem 0.75rem;border-radius:8px;background:rgba(255,255,255,0.02);color:var(--muted)}

/* Forms */
label{display:block;margin-bottom:.5rem}
input[type="text"],input[type="password"],input[type="email"],select,textarea{
	background:transparent;
	border:1px solid rgba(255,255,255,0.06);
	padding:.6rem .75rem;
	border-radius:8px;
	color:var(--surface-text);
	width:100%;
	height:42px;
	line-height:1.25;
	font-size:0.95rem;
}
form label small{display:block;color:var(--muted);font-size:.85rem}
main{display:flex;align-items:center;justify-content:center;min-height:70vh}
.login-card{max-width:720px;margin:0 auto;padding:1.25rem;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),var(--glass));box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.login-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.login-brand .logo{width:56px;height:56px;border-radius:10px;font-size:1.125rem}
.error{background:#3b0f12;color:#ffd2d2;padding:.5rem .75rem;border-radius:8px;margin-bottom:.75rem}

/* Login enhancements */
.login-hero{display:flex;gap:1rem;align-items:center;flex-wrap:nowrap}
.hero-illustration{flex:1;min-height:160px;border-radius:10px;background:linear-gradient(135deg,rgba(96,165,250,0.08),rgba(94,234,212,0.04));display:flex;align-items:center;justify-content:center;color:var(--muted);padding:1rem}
.login-form-wrap{flex:1;min-width:260px}
.field-row{display:flex;gap:.5rem}
.input-with-button{display:flex;gap:.5rem;align-items:center}
.input-with-button > input{flex:1;min-width:0}
.input-with-button > button{flex:0 0 auto;height:42px;padding:0 .75rem}
.btn[disabled]{opacity:.6;cursor:wait}

/* spinner */
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,0.12);border-top-color:var(--surface-text);animation:spin 1s linear infinite;margin-left:.5rem}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* subtle input focus */
input:focus, select:focus, textarea:focus{outline:none;box-shadow:0 0 0 4px rgba(96,165,250,0.06);border-color:rgba(96,165,250,0.6)}



/* Responsive */
@media (max-width:640px){.topbar{flex-direction:column;align-items:flex-start;gap:0.5rem}.grid{grid-template-columns:1fr}}

/* Responsive adjustments specifically for login hero */
@media (max-width:900px){
	.login-hero{flex-direction:column}
	.hero-illustration{order:2;width:100%}
	.login-form-wrap{order:1;width:100%}
	.login-card{padding:.75rem}
}

/* Mobile list view for admin books */
@media (max-width:900px){
	.table-reviews-geex-1 { display: none !important; }
	.books-list { display:block; list-style:none; margin:0; padding:0; }
	/* Minimal list rows */
	.book-item { display:flex; gap:.75rem; align-items:center; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,0.02); }
	.book-item-left { flex:1 1 auto; min-width:0; }
	.book-item-right { flex:0 0 auto; display:flex; gap:.5rem; align-items:center; }
	.book-item-title { font-weight:600; font-size:0.98rem; color:var(--surface-text); margin-bottom:0; }
	.book-item-sub { display:flex; gap:.75rem; color:var(--muted); font-size:0.88rem; flex-wrap:wrap; }
	.book-item-sub .small { display:inline-block; }
	.book-item-actions { display:flex; gap:.5rem; margin-left:.5rem }
	.book-item .geex-btn { padding:.25rem .5rem; height:auto; font-size:0.85rem; border-radius:8px }
}

@media (min-width:901px){
	.books-list { display:none; }
}

/* Ensure login card is centered on page */
.login-card{max-width:720px;width:100%;margin:2rem auto;padding:1.25rem}

/* form label spacing */
label{display:block;margin-bottom:.5rem;font-size:0.95rem}
label > .small{margin-top:.25rem}

/* checkbox alignment */
input[type=checkbox]{width:16px;height:16px}

/* make hero illustration more subtle */
.hero-illustration{min-height:120px}

/* Generic form utilities for consistent layout */
.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:.5rem;align-items:end}
.form-field{grid-column:span 12}
.form-field.half{grid-column:span 6}
.form-field.third{grid-column:span 4}
.form-field.two{grid-column:span 8}
.form-input{width:100%;box-sizing:border-box}
.form-select{height:42px}
.form-actions{margin-top:.5rem;display:flex;gap:.5rem;align-items:center}
.form-card{padding:.75rem;border-radius:10px;background:rgba(255,255,255,0.01)}

@media (max-width:900px){
	.form-field.half, .form-field.third, .form-field.two { grid-column: span 12 }
}

/* Admin books: make table horizontally scrollable on small devices and
	 adjust search controls/buttons to wrap cleanly. */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-reviews-geex-1{min-width:800px}

@media (max-width:900px){
	/* Ensure the search form wraps and occupies full width on narrower viewports */
	.geex-content__section form{margin-left:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;width:100%}
	.geex-content__section form input[type="text"]{flex:1;min-width:0}
	.geex-content__section form select{width:auto}

	/* Table compacting for mobile: reduce padding and stack action buttons */
	.table-reviews-geex-1 thead th, .table-reviews-geex-1 tbody td{padding:.5rem .4rem}
	.table-reviews-geex-1 td .geex-btn, .table-reviews-geex-1 td .btn{height:36px;padding:.25rem .5rem;font-size:.85rem}
}

@media (max-width:640px){
	/* On small phones, allow more compact table and enable horizontal scroll */
	.table-reviews-geex-1{min-width:720px}
	.actions{flex-wrap:wrap}
}

/* Force horizontal text in books table to override theme rotations on small screens */
.table-reviews-geex-1 thead th, .table-reviews-geex-1 tbody td {
	writing-mode: horizontal-tb !important;
	-webkit-writing-mode: horizontal-tb !important;
	text-orientation: mixed !important;
	transform: none !important;
	-webkit-transform: none !important;
	white-space: normal !important;
	letter-spacing: normal !important;
	display: table-cell !important;
	vertical-align: middle !important;
}

/* Also ensure header text does not get split into characters */
.table-reviews-geex-1 thead th * { display: inline !important; }

/* Stronger reset for headers we explicitly mark as non-vertical */
.table-reviews-geex-1 thead th .no-vertical {
	display: inline-block !important;
	transform: none !important;
	-webkit-transform: none !important;
	writing-mode: horizontal-tb !important;
	-webkit-writing-mode: horizontal-tb !important;
	text-orientation: mixed !important;
	white-space: nowrap !important;
	letter-spacing: normal !important;
	line-height: 1.2 !important;
}

/* If any child elements were broken into single-character blocks, collapse them */
.table-reviews-geex-1 thead th .no-vertical * { display: inline !important; }

/* Aggressive overrides to prevent per-character stacking inside table cells */
.table-reviews-geex-1 td, .table-reviews-geex-1 th {
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}
.table-reviews-geex-1 td > *, .table-reviews-geex-1 th > *,
.table-reviews-geex-1 td * , .table-reviews-geex-1 th * {
	display: inline !important;
	white-space: normal !important;
	word-break: normal !important;
	writing-mode: horizontal-tb !important;
	-webkit-writing-mode: horizontal-tb !important;
	transform: none !important;
}

/* Keep action buttons layout intact */
.table-reviews-geex-1 td .geex-btn, .table-reviews-geex-1 td .btn { display: inline-flex !important; }

/* Extra strong overrides to counter theme rules that rotate header text on small screens. */
@media (max-width:900px){
	.table-reviews-geex-1 thead th,
	.table-reviews-geex-1 thead th *,
	.table-reviews-geex-1 tbody td,
	.table-reviews-geex-1 tbody td * {
		writing-mode: horizontal-tb !important;
		-webkit-writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;
		transform: none !important;
		-webkit-transform: none !important;
		display: table-cell !important;
		white-space: normal !important;
		word-break: break-word !important;
		letter-spacing: normal !important;
		vertical-align: middle !important;
	}

	/* Ensure header spans are inline and not split into single characters */
	.table-reviews-geex-1 thead th .no-vertical,
	.table-reviews-geex-1 thead th .no-vertical * {
		display: inline-block !important;
		white-space: nowrap !important;
		transform: none !important;
	}

	/* Keep action buttons inline (not stacked) */
	.table-reviews-geex-1 td .geex-btn, .table-reviews-geex-1 td .btn { display: inline-flex !important; }
}

/* Additional aggressive overrides for any remaining vertical layout rules */
@media (max-width:900px) {
	/* Target header cells and common wrapper elements */
	.table-reviews-geex-1 thead th, 
	.table-reviews-geex-1 thead th > span, 
	.table-reviews-geex-1 thead th > a,
	.table-reviews-geex-1 thead th * ,
	.table-reviews-geex-1 tbody td, 
	.table-reviews-geex-1 tbody td * {
		writing-mode: horizontal-tb !important;
		-webkit-writing-mode: horizontal-tb !important;
		transform: none !important;
		-webkit-transform: none !important;
		display: inline-block !important;
		white-space: nowrap !important;
		text-orientation: mixed !important;
		letter-spacing: normal !important;
		line-height: 1.2 !important;
	}

	/* Collapse any single-letter wrappers into inline text */
	.table-reviews-geex-1 thead th span, .table-reviews-geex-1 thead th span * {
		display: inline !important;
		white-space: nowrap !important;
	}

	/* Force action buttons to stay horizontal and centered */
	.table-reviews-geex-1 td .geex-btn, 
	.table-reviews-geex-1 td .btn, 
	.table-reviews-geex-1 td button {
		writing-mode: horizontal-tb !important;
		transform: none !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		white-space: nowrap !important;
		height: auto !important;
		padding: .4rem .6rem !important;
	}

	/* In case theme splits letters via pseudo elements, hide those and show normal text */
	.table-reviews-geex-1 thead th::before, .table-reviews-geex-1 thead th::after,
	.table-reviews-geex-1 thead th span::before, .table-reviews-geex-1 thead th span::after {
		display: none !important;
		content: none !important;
	}
}