.form-container {
    display: block;     /* NEW — overrides `form { display: inline }` */
    margin: auto;
    width: 50%;
    padding: 20px;
    border: 1px solid #444;
    box-shadow: 0 0 10px #000;    
	min-width: 400px; /* Minimum width set to 400 pixels */
	border-radius: 6px;
}
.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.form-label {
    flex: 1;
    margin-right: 10px;
}
.form-input {
    flex: 2;
}
.form-btn-group {
    display: flex;
    justify-content: space-between;
}
.form-btn {
    margin-top: 10px;
}

.image-frame {
    overflow-x: auto;
    white-space: nowrap;
	display: inline-block;
	margin-right: 0px;
	margin-left: 0px;
	padding:0px;
}

.image-container {
    display: inline-block;
    margin-right: 10px;
	box-sizing: border-box;
	overflow-x: auto;
	white-space: nowrap;
	white-space-collapse: collapse;
    /* Additional styling */
}

.image-footer {
    /* Styling for footer */
	background-color: #212121;
	text-align: center;
}

.scrolling-content {
    white-space: nowrap; /* Prevent line wrapping */
    overflow-x: auto; /* Add horizontal scrollbar when content overflows */	
	
	box-shadow: inset 0 0 10px #000;
	/* background-image: url('Images/Web_Assets/meterlines.webp');
    background-repeat: repeat; 
    background-position: bottom 10px;
	height: 620px;*/
  }
.scrolling-content--centered {
    text-align: center;
}
.scrolling-item {
	display: inline-block;
	margin-right: 0px;
	margin-left: 0px;	
	height: 100%;
	padding : 0px;
	text-align: center;
    /*background-color: #414141;*/
}
.image-thumb {
	width: unset;
	padding: 0px;
	margin: 0px;
	max-width: unset;
	vertical-align: bottom;
	display: inline-block;
}
  /* Style for thumbnail titles */
.thumbnail-title {
    margin-top: 5px;
	white-space: nowrap; /* Prevent line wrapping */
    overflow-x: hidden; /* Add horizontal scrollbar when content overflows */		
    font-size:1.0em;
    font-family: serif,'Times';
    line-height: 1.1em;    
    text-align: center;	
  }

  
  /* from wowhead */
  
body {
    background: #000000;
    color: #bbb;
    font: 14px "Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
    margin: 0;
    padding: 0
}

html * {
    max-height: 1000000px
}

h1, h2, h3, h4, h5 {
    color: #fff;  /* Bright white for high contrast */
    font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 700;  /* Bold for emphasis */
    margin: 20px 0 10px;  /* Consistent vertical spacing */
    line-height: 1.2;  /* Tight but scannable */
}

h1 {
    font-size: 38px;  /* Page titles */
    border-bottom: 2px solid #444;  /* Optional subtle divider */
}

h2 {
    font-size: 28px;  /* Main sections */
    border-bottom: 1px solid #444;
}

h3 {
    font-size: 22px;  /* Subsections */
}

h4 {
    font-size: 18px;  /* Deeper details */
}

h5 {
    font-size: 16px;  /* Fine print or lists */
}

/* Responsive scaling for smaller screens */
@media screen and (max-width: 767px) {
    h1 { font-size: 32px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 16px; }
    h5 { font-size: 14px; }
}

form {
    display: inline;
    margin: 0;
    padding: 0
}

.header {
    background: #202020;
    padding: 0px;
    z-index: 10
}

.header-wrapper {
    background: #202020;
    box-shadow: inset 0 29px 0 #181818,inset 0 30px 0 #444;
    left: 0;
    position: relative;
    right: 0;
    top: 0;
    transition: top 150ms;
    z-index: 1000
}

.header-nav {
    border-bottom: 1px solid #444;
    position: relative
}

.header-nav:after {
    content: ' ';
    display: block;
    clear: left
}
/*
.header-nav-features>a.header-nav-classes.first-2:before {
    background-image: url(/Images/Web_Assets/menu_characters.webp)
}*/

.header-menu {
	display: flex;
	background: #181818;
	border-bottom: 1px solid #444;
	padding-left: 20px;
	padding-top: 20px;	
	flex-wrap: wrap;  /* Wrap on smaller screens */
}

.header-menu-item {
	padding: 0px;
	background: #181818;
	background-image: url(Images/Web_Assets/Kurtloganart_MenuItembg.webp);
	background-repeat: no-repeat;
	background-position: top;
	justify-content: center;
	font-family: "Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
	text-transform: uppercase;
	color: #bbb;
	text-decoration: none;
}

.header-menu-item a {
	color: #bbb;
}
.header-menu-item a:hover {
	color: #fff;
}

.header-menu-item span {
	text-align: center;
	display: block;
}

.header-admin-bar {
	text-align: center;
	display: block;
	background-color: #1818FF;
}

.header-nav-wrapper {
    border-bottom: 1px solid #444;
    border-top: 1px solid #444
}

.header-nav-wrapper:after {
    content: ' ';
    display: block;
    clear: left	
}
.header-nav,.header-nav-features {
    box-sizing: border-box;
    padding: 0 0 0 10px
}

.header-nav a,.header-nav-features>a {
    color: #bbb;
    display: inline-block;
    font-family: "Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    /*height: 50px;*/
    letter-spacing: 1px;
    white-space: nowrap;
    line-height: 50px;
    cursor: pointer;
    margin-right: 5px;
    padding: 0 20px;
    position: relative;
    text-transform: uppercase;
    vertical-align: top
}

.header-logo {
    background-repeat: no-repeat;
    background-size: auto 100%;
    border: 0;
    display: flex;
    height: 80px;    
    position: relative 
}

.header-left {    
    position: relative;    	
	padding: 0px;
	display: flex;
	align-items: center;
	margin-right: 10px;
    z-index: 1	
}



.header-right {
    display: block;
	width: 100%;
	height: 100%;
    background-image: url('Images/Web_Assets/kurtloganart_banner01.webp'); /* Replace with your image path */
    background-repeat: repeat;
    background-position: left;
}

.header-banner {
	display: flex;
	align-items: center;
	height: 80px;
}
.header-banner-text {
	height:30px;
	vertical-align: center;
	color: #fff;
    font-family: brother-1816,"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-weight: 700;
	font-size: 28px
}

.main {
	display: flex;
    flex-direction: column;
    align-items: center;  /* Center content like Wowhead guides */    
    margin: 0 auto;
    width: 100%;  /* Ensures it fills available space */
    background: #000000;  /* Wowhead-inspired content bg for depth */
    color: #bbb;	
}

.text {
    background: #181818;  /* Wowhead-inspired content bg for depth */
    color: #bbb;
}

.content-wrapper {
    max-width: 1200px;  /* Centered constraint like Wowhead guides */
    margin: 0 auto;  /* Auto margins for horizontal centering */
    width: 100%;  /* Fills on smaller screens */
    padding: 0 15px;  /* Light side padding for mobile */
    background: #181818;  /* Wowhead-inspired content bg for depth */
}

a {
    color: #ffd100;
    cursor: pointer;
    text-decoration: none
}

a:hover {
    color: #fff
}

a.focus-visible {
    box-shadow: 0 2px 0
}

h1,h2,h3,h4,h5,h6,.imitation-heading {
    color: #fff;
    font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 700;
    margin: 30px 0 8px;
	line-height: 1.1;
}

strong,b {
    font-weight: 600
}

@media screen and (max-width: 767px) {
    h2.heading-bar {
        font-size:18px
    }
}

h3.heading-bar {
    font-size: 18px
}

@media screen and (max-width: 767px) {
    .header-menu {
        flex-direction: column;  /* Stack items vertically */
        align-items: center;
    }
    h1 {
        font-size: 28px;  /* Scale down for mobile */
    }
    .full-width-scroll {
        left: 0;  /* Simplify for mobile; no offset needed */
        margin-left: 0;
        margin-right: 0;
    }
	content-wrapper {
        padding: 0 10px;  /* Tighter on mobile */
    }
	.PageBanner h1 {
        font-size: 28px;  /* Scale down */
    }
}

@media screen and (max-width: 767px) {
    h3.heading-bar {
        font-size:16px
    }
}

h4.heading-bar {
    font-size: 14px
}

h5.heading-bar {
    font-size: 14px
}

h6.heading-bar {
    font-size: 14px
}

.text {
    color: #bbb;
    line-height: 1.5;
	margin-left: 30px;
	margin-right: 30px;
	padding: 20px 0;  /* Add vertical spacing for content flow */
}

.text p,.text div.p-margin {
    margin: 10px 0
}

.text p:first-child,.text div.p-margin:first-child {
    margin-top: 0
}

.text p:last-child,.text div.p-margin:last-child {
    margin-bottom: 0
}

.text b {
    color: #fff
}

.text a b {
    color: inherit !important
}

.text ul,.text ol {
    margin: 1em 0;
    padding-left: 24px
}

.text ul ul,.text ul ol,.text ol ul,.text ol ol {
    margin-top: 0;
    margin-bottom: 0
}

.text ol {
    color: #e5cc80;
    list-style-type: decimal !important
}

.text ul {
    list-style-type: square
}


.text li {
    line-height: 1.5
}

.text li,.news-post-content li {
    list-style-position: outside
}

.text ol li div,.text li div {
    color: #bbb
}

.text code {
    background: rgba(0,0,0,0.25);
    border-radius: 2px;
    font-family: "JetBrains Mono",Consolas,"Bitstream Vera Sans Mono",monospace;
    font-size: 95%;
    padding: 2px
}

.text .h1-links {
    float: right
}

.text hr {
    background: #444;
    border: none;
    color: #444;
    height: 1px;
    margin-bottom: 13px;
    margin-top: 13px
}

.PageBanner {
	display: block;
	width: 100%;
    background-image: url('Images/Web_Assets/Ban_Characters2.webp'); /* Replace with your image path */
    background-repeat: repeat-X;
    background-position: left top;
	/* height: 449px; */
    height: 250px;
	position: relative;  /* For absolute positioning of title/breadcrumb */
}

.PageBanner h1 {
	position: absolute;
    /*top: 350px; */
    top: 200px;
    left: 50%; /* Center align */
    transform: translateX(-50%); /* Centers the title exactly */
	width: auto;
    margin: 0; /* Removes default margin */    
    color: #FFFFFF; /* Example text color */
    text-align: center; /* Ensures the text within the h1 is centered */
	font-family: brother-1816, "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 400;
}

.breadcrumb {
    position: absolute;
    top: 10px;  /* Position above title if needed */
    left: 20px;    
	background: url('Images/Web_Assets/KLArtlogo48.webp') left center / 16px no-repeat;
    cursor: default;
    font-size: 14px;
    padding: 5px 0 5px 20px;
}
.breadcrumb span {
    display: inline-block;
    position: relative;
    z-index: 1;
}
.breadcrumb-arrow {
    background: url('Images/Web_Assets/arrow-right.webp') right center no-repeat;
    padding-right: 17px;
}

.CharacterListView {
	background: #202020;
	pointer-events: auto;
	border-color: #050505 !important;	
	border-collapse: collapse;
	width: 100%;
}

.CharacterListView {
	text-indent: initial;	
}

.CharacterListView th {
	background: #303030;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0px;
}

.CharacterListView tr {
	display: table-row;
	vertical-align: inherit;	
}

.CharacterListView th {
    white-space: nowrap
}

.CharacterListView td {    
    padding: 0px;
	margin: 0px;
    text-align: center;	
	border-top: 1px solid black;
}

.CharacterListView td a {
	display: block;
	color: #ffffff;
}

.CharacterListView td img {
	display: block;
}

.CharacterListView .crop {
    height: 1.2em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis
}

.CharacterListView tbody {
	display: table-row-group;
	vertical-align: middle;	
}

.CharacterListView tbody.clickable tr {
    cursor: pointer
}

.CharacterListView tbody tr:hover {
    background-color: #181818
}

.iconmedium {
	height: 44px;
	width: 44px;
	pointer-events: none;
	position: relative;
	z-index: 0;
	padding: 0;
	margin: 0;
}

#Character_List_Table td:hover {
    cursor: pointer;
}

.full-width-scroll {
    width: 99vw;  /* Full viewport width for immersive scrolling */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;  /* Centers it by offsetting half the viewport */
    margin-right: -50vw;
    overflow-x: auto;  /* Ensures horizontal scroll if needed */
	box-shadow: inset 0 0 10px #000;  /* Subtle depth like Wowhead insets */
}

/* Two column layout */
.detail-layout {
    display: flex;
    gap: 20px;
    padding: 20px 0;
}
.detail-main    { flex: 3; min-width: 0; }
.detail-sidebar { flex: 1; min-width: 220px; }


/* Draft indicator badge in page title */
/* Draft indicator badge in page title */
.article-draft-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #181818;
    background: #ffd100;
    border-radius: 4px;
    padding: 2px 8px;
    vertical-align: middle;
    margin-left: 10px;
}
 
/* Cover image — full width above the article body */
.article-cover {
    position: relative;
    margin-bottom: 16px;
    border-radius: 6px;
    overflow: hidden;   /* clips both the image corners and the gradient overlay */
}
.article-cover img {
    width: 100%;
    height: auto;
    display: block;
}
 
/* Gradient scrim so text is legible over any image */
.article-cover::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
    pointer-events: none;
}
 
/* Metadata stack — sits above the gradient via z-index */
.article-cover-meta {
    position: absolute;
    bottom: 14px;
    left: 16px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.article-meta-author {
    color: #ffd100;
    font-size: 13px;
    font-weight: bold;
}
.article-meta-category {
    color: #ccc;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.article-meta-date {
    color: #aaa;
    font-size: 11px;
}
 
/* Fallback meta line when there is no cover image */
.article-meta {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}
.article-meta-sep {
    margin: 0 6px;
    color: #555;
}
 
/* Cover thumbnail in the sidebar edit panel */
.article-cover-thumb {
    text-align: center;
    margin-bottom: 10px;
}
.article-cover-thumb img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin-bottom: 6px;
    object-fit: cover;
}
 
/* Shared input/select style for article settings sidebar.
   Mirrors .content-block-modal input[type="text"] visually. */
.article-settings-input {
    width: 100%;
    box-sizing: border-box;
    background: #181818;
    border: 1px solid #444;
    color: #fff;
    border-radius: 4px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 12px;
    margin-bottom: 8px;
}
.article-settings-label {
    display: block;
    color: #888;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}
 
/* Divider inside quick-facts sidebar */
.quick-facts-divider {
    border: none;
    border-top: 1px solid #333;
    margin: 10px 0;
}
 
/* Article list — cover thumbnail column */
.article-list-thumb {
    height: 75px;
    width: auto;
    border-radius: 3px;
    vertical-align: middle;
    display: block;
}

/* Pointer cursor on article list rows to signal clickability */
.article-list-table tr:hover {
    cursor: pointer;
}
 
/* Title cell — left-aligned, vertically centered next to thumbnail */
.article-list-title {
    text-align: left;
    vertical-align: middle;
}

.article-list-thumb-cell {
    width: 1px;
    padding: 0;
}

/* Quick Facts sidebar */
.quick-facts {
    background: #202020;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 15px;
    position: sticky;
    top: 20px;
}
.quick-facts h4 {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
    color: #fff;
}
.quick-facts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #444;
}
.quick-facts-edit-btn {
    background: #202020;
    border: 1px solid #444;
    color: #ffd100;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.quick-facts-edit-btn:hover {
    background: #2a2a2a;
    color: #fff;
}

.quick-facts table { width: 100%; border-collapse: collapse; }
.quick-facts td { padding: 5px 0; color: #bbb; vertical-align: top; }
.quick-facts td:first-child {
    color: #fff;
    font-weight: bold;
    width: 45%;
    padding-right: 10px;
}

/* Character alias */
.character-alias {
    color: #ffd100;
    font-style: italic;
    font-size: 1.1em;
    margin: 10px 0;
}

/* Tab bar */
.tab-bar {
    display: flex;
    border-bottom: 2px solid #444;
    margin: 20px 0 0;
}
.tab-item {
    padding: 10px 20px;
    cursor: pointer;
    color: #bbb;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.tab-item:hover  { color: #fff; }
.tab-item.active { color: #ffd100; border-bottom-color: #ffd100; }

/* Tab content */
.tab-content         { display: none; padding: 20px 0; }
.tab-content.active  { display: block; }

/* Responsive */
@media screen and (max-width: 767px) {
    .detail-layout { flex-direction: column; }
    .detail-sidebar { position: static; }
}

/* Character portrait in sidebar */
.character-portrait {
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
}
.character-portrait img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 1px solid #444;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}

.character-portrait-clickable {
    cursor: pointer;
    transition: opacity 0.15s ease, filter 0.15s ease;
}
.character-portrait-clickable:hover {
    opacity: 0.85;
    filter: brightness(1.15);
}

/* Married name shown in muted style below birth name */
.married-name {
    color: #888;
    font-size: 0.9em;
    font-style: italic;
}

.quick-facts-alias-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quick-facts-alias-list li + li {
    margin-top: 2px;
}

/* Content Block — markdown-driven text sections */
.content-block {
    position: relative;
}

.content-block-body::after {
    content: '';
    display: table;
    clear: both;
}

.content-block-body h1,
.content-block-body h2,
.content-block-body h3,
.content-block-body h4,
.content-block-body h5,
.content-block-body h6 {
    clear: both;
}

.content-block-body strong {
    color: #fff;
}

.content-block-scrollable {
    border: 1px solid #444;
    border-radius: 4px;
    padding: 12px;
}

.content-block-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.content-block-upload-btn {
    background: #202020;
    border: 1px solid #444;
    color: #ffd100;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.content-block-upload-btn:hover {
    background: #2a2a2a;
    color: #fff;
}

/* Content Block — upload modal */
.content-block-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.content-block-modal-overlay.active {
    display: flex;
}
.content-block-modal {
    background: #222;
    padding: 1.5rem;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    border: 1px solid #444;
    box-sizing: border-box;
}
.content-block-modal h3 {
    margin-top: 0;
    border-bottom: 1px solid #444;
    padding-bottom: 8px;
}
.content-block-modal label {
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 12px 0 4px;
}
.content-block-modal textarea,
.content-block-modal input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: #181818;
    border: 1px solid #444;
    color: #fff;
    border-radius: 4px;
    padding: 8px;
    font-family: inherit;
    font-size: 13px;
}
.content-block-modal textarea {
    resize: vertical;
    min-height: 200px;
}
.content-block-modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}
.content-block-modal-buttons button {
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}
.content-block-cancel-btn {
    background: #333;
    color: #bbb;
}
.content-block-cancel-btn:hover {
    background: #444;
    color: #fff;
}
.content-block-save-btn {
    background: #ffd100;
    color: #181818;
}
.content-block-save-btn:hover {
    background: #fff;
}

/* Inline images embedded via ![name|width] syntax */
.content-inline-img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Left float — text wraps to the right (default) */
.content-inline-img--left {
    float: left;
    margin: 4px 16px 8px 0;
}

/* Right float — text wraps to the left */
.content-inline-img--right {
    float: right;
    margin: 4px 0 8px 16px;
}

/* Centered block — no wrap, full width treatment */
.content-inline-img--center {
    display: block;
    margin: 12px auto;
    clear: both;
}

/* Placeholder shown when an image name didn't resolve */
.content-inline-img--missing {
    opacity: 0.5;
}
 
/* Character wikilinks — golden, same font weight as page buttons */
a.content-char-link {
    color: #ffd100;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}
a.content-char-link:hover {
    border-bottom-color: #ffd100;
}
 
/* Broken character links — display name or raw tag text, red underline */
.content-char-link--broken {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #e74c3c;
    text-underline-offset: 3px;
    cursor: default;
}
 
/* Filtered image placeholder text */
.content-ref-filtered {
    color: #555;
    font-style: italic;
    font-size: 0.9em;
}

/* ============================================================
   Character hover preview card
   Add near the .content-block rules in klastyle.css
   ============================================================ */
 
.char-preview-card {
    position: absolute;
    z-index: 10100;
    width: 240px;
    background: #1a1a1a;
    border: 1px solid #555;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.7);
    overflow: hidden;
    pointer-events: none; /* card never blocks mouse events on links below */
}
 
.char-preview-portrait {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111;
}
 
.char-preview-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
 
.char-preview-info {
    padding: 8px 10px 10px;
}
 
.char-preview-name {
    color: #ffd100;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 
.char-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
 
.char-preview-table td {
    padding: 2px 4px;
    vertical-align: top;
    color: #ccc;
    border: none;
}
 
.char-preview-table td:first-child {
    color: #888;
    white-space: nowrap;
    width: 44px;
}

/* ============================================================
   MAIN GALLERY — Layout, Sidebar, Search Bar, Toolbar
   Append to klastyle.css
   ============================================================ */

/* Gallery page: sidebar-left / content-right
   Inverted from the character page's sidebar-right convention
   because the filter sidebar is a primary navigation tool. */
   .gallery-layout {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    align-items: flex-start;
}

.gallery-sidebar {
    flex: 0 0 220px;
    min-width: 180px;
    position: sticky;
    top: 20px;
}

.gallery-main {
    flex: 1;
    min-width: 0;
}

/* --------------------------------------------------------
   Search bar
   -------------------------------------------------------- */
.gallery-search-bar {
    background: #202020;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px;
}

.gallery-search-input-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gallery-search-input {
    width: 100%;
    box-sizing: border-box;
    background: #181818;
    border: 1px solid #444;
    color: #fff;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
    font-family: inherit;
}

.gallery-search-input:focus {
    outline: none;
    border-color: #ffd100;
}

.gallery-search-btn {
    background: #ffd100;
    color: #181818;
    border: none;
    border-radius: 4px;
    padding: 5px 0;
    width: 100%;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gallery-search-btn:hover {
    background: #fff;
}

.gallery-search-hint {
    margin-top: 6px;
    font-size: 11px;
    color: #666;
}

.gallery-search-help-link {
    color: #666;
    border: 1px solid #555;
    border-radius: 50%;
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 13px;
    text-align: center;
    font-size: 10px;
    text-decoration: none;
    margin-left: 4px;
    vertical-align: middle;
}

.gallery-search-help-link:hover {
    color: #ffd100;
    border-color: #ffd100;
}

/* --------------------------------------------------------
   Sidebar sections — Characters and Keywords
   -------------------------------------------------------- */
.gallery-sidebar-section {
    background: #202020;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.gallery-sidebar-heading {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
    margin-bottom: 8px;
}

.gallery-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery-sidebar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    border-bottom: 1px solid #2a2a2a;
    font-size: 12px;
}

.gallery-sidebar-item:last-child {
    border-bottom: none;
}

/* +/− buttons */
.sidebar-btn {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #bbb;
    border-radius: 3px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    font-size: 13px;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.1s ease, color 0.1s ease;
}

.sidebar-btn:hover {
    background: #ffd100;
    color: #181818;
    border-color: #ffd100;
}

/* Character name — navigation link */
.sidebar-character-link {
    flex: 1;
    color: #ffd100;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.sidebar-character-link:hover {
    color: #fff;
}

/* Keyword text — clickable, adds to search bar */
.sidebar-keyword-text {
    flex: 1;
    color: #bbb;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    transition: color 0.1s ease;
}

.sidebar-keyword-text:hover {
    color: #fff;
}

/* Image count badge */
.sidebar-count {
    color: #555;
    font-size: 11px;
    flex-shrink: 0;
    margin-left: 2px;
}

.gallery-sidebar-empty {
    color: #555;
    font-size: 12px;
    font-style: italic;
    margin: 4px 0;
}

/* --------------------------------------------------------
   Gallery toolbar — result count + upload button
   -------------------------------------------------------- */
.gallery-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

.gallery-result-count {
    font-size: 13px;
    color: #888;
}

.gallery-upload-btn {
    background: #202020;
    border: 1px solid #444;
    color: #ffd100;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.gallery-upload-btn:hover {
    background: #2a2a2a;
    color: #fff;
}

/* --------------------------------------------------------
   Layer 1 placeholder — remove when GalleryRender() exists
   -------------------------------------------------------- */
.gallery-layer1-placeholder {
    background: #1a1a1a;
    border: 2px dashed #333;
    border-radius: 6px;
    padding: 60px 20px;
    text-align: center;
    color: #444;
    font-style: italic;
    font-size: 14px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------
   Search help popup
   -------------------------------------------------------- */
.gallery-help-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.gallery-help-overlay.active {
    display: flex;
}

.gallery-help-box {
    background: #222;
    padding: 1.5rem;
    border-radius: 12px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    border: 1px solid #444;
    position: relative;
}

.gallery-help-box h3 {
    margin-top: 0;
    border-bottom: 1px solid #444;
    padding-bottom: 8px;
}

.gallery-help-box p {
    font-size: 13px;
    color: #bbb;
    line-height: 1.6;
    margin: 8px 0;
}

.gallery-help-box code {
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 12px;
    color: #ffd100;
}

.gallery-help-close {
    position: absolute;
    top: 12px;
    right: 16px;
    cursor: pointer;
    color: #aaa;
    font-size: 1.4rem;
    line-height: 1;
}

.gallery-help-close:hover {
    color: #fff;
}

/* --------------------------------------------------------
   Responsive
   -------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .gallery-layout {
        flex-direction: column;
    }
    .gallery-sidebar {
        position: static;
        flex: none;
        width: 100%;
    }
}

/* ============================================================
   LAYER 1 — Thumbnail Grid and Pagination
   ============================================================ */
 
/* Grid container — responsive flex wrap */
.kla-gallery {
    width: 100%;
}
 
.kla-thumb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0 16px;
}
 
/* Each thumbnail cell — fixed 100x100 block, image centered within */
.kla-thumb-item {
    width: 100px;
    height: 100px;
    background: #181818;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
 
.kla-thumb-item:hover {
    border-color: #ffd100;
    box-shadow: 0 0 6px rgba(255, 209, 0, 0.3);
}
 
/* Thumbnail image — centered within cell, never cropped.
   object-fit: contain preserves aspect ratio with background
   showing through on uncovered sides. */
.kla-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
 
/* Empty state */
.kla-gallery-empty {
    padding: 60px 20px;
    text-align: center;
    color: #444;
    font-style: italic;
}
 
/* --------------------------------------------------------
   Pagination bar
   -------------------------------------------------------- */
.kla-pager {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0 4px;
    flex-wrap: wrap;
}
 
.kla-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: #202020;
    border: 1px solid #444;
    border-radius: 4px;
    color: #bbb;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    cursor: pointer;
}
 
.kla-pager-btn:hover {
    background: #2a2a2a;
    border-color: #ffd100;
    color: #ffd100;
}
 
.kla-pager-current {
    background: #ffd100;
    border-color: #ffd100;
    color: #181818;
    font-weight: bold;
    cursor: default;
}
 
.kla-pager-current:hover {
    background: #ffd100;
    color: #181818;
}
 
.kla-pager-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
 
.kla-pager-ellipsis {
    color: #555;
    padding: 0 4px;
    font-size: 13px;
}
 
.kla-pager-info {
    margin-left: 8px;
    font-size: 12px;
    color: #555;
}

.character-list-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 10px;
    border-bottom: 2px solid #444;
}
.character-list-header-row h1 {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.new-character-btn {
    background: #202020;
    border: 1px solid #444;
    color: #ffd100;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.new-character-btn:hover {
    background: #2a2a2a;
    color: #fff;
}

.img-field-group { display: flex; flex-direction: column; gap: 5px; }
.img-field-label {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}
.img-field-required { color: #ff6666; margin-left: 2px; }
.img-field-text {
    background: #181818;
    border: 1px solid #444;
    color: #fff;
    border-radius: 4px;
    padding: 7px 9px;
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.img-field-text:focus { outline: none; border-color: #ffd100; }
.img-field-hint { margin: 0; font-size: 11px; color: #555; line-height: 1.4; }

/* ============================================================
   Filter toolbar — inline row of filter controls (checkboxes,
   selects) sitting above a content area. Distinct from
   .gallery-toolbar, which is a fixed 2-item space-between
   layout for a result count + action button.
   ============================================================ */
   .filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

.filter-toolbar-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-toolbar label {
    font-size: 12px;
    color: #bbb;
    white-space: nowrap;
}

/* .img-field-text defaults to width:100% for its modal-field
   context; here it sits inline among other controls instead. */
.filter-toolbar .img-field-text {
    width: auto;
}

/* ============================================================
   News — add to klastyle.css near existing .article-* rules
   Reuses: .PageBanner, .breadcrumb, .content-wrapper, .text,
   .character-list-header-row, .new-character-btn,
   .article-draft-badge, .article-cover, .article-cover-meta,
   .article-meta-author, .article-meta-date, .article-meta,
   .article-meta-sep, .article-settings-label, .article-settings-input
   ============================================================ */
 
/* -------------------------------------------------------
   News card list — Wowhead news-card-simple style
   Horizontal layout: thumbnail left, text right
   ------------------------------------------------------- */
   .news-card {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #2a2a2a;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.1s ease;
}
.news-card:last-child {
    border-bottom: none;
}
.news-card:hover .news-card-title {
    color: #ffd100;
}
 
/* Thumbnail — fixed 300px wide, image fills height naturally */
.news-card-thumbnail {
    flex: 0 0 300px;
    width: 300px;
    overflow: hidden;
    border-radius: 4px;
    background: #111;
}
.news-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
 
/* Text column — fills remaining width */
.news-card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0; /* prevents flex overflow on long titles */
}
 
.news-card-title {
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    margin: 0;
    line-height: 1.3;
    transition: color 0.1s ease;
}
 
.news-card-summary {
    color: #bbb;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    /* Clamp to 3 lines so very long summaries don't dominate */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
 
.news-card-byline {
    color: #666;
    font-size: 11px;
    margin-top: auto; /* pushes byline to bottom of card */
}
 
/* -------------------------------------------------------
   News post page — admin edit bar above content
   Horizontal row of fields + action buttons
   ------------------------------------------------------- */
.news-admin-bar {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
 
.news-admin-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
 
.news-admin-field {
    display: flex;
    flex-direction: column;
    min-width: 160px;
    flex: 1;
}
 
/* Wide field (summary) gets more space */
.news-admin-field--wide {
    flex: 2;
    min-width: 260px;
}
 
.news-admin-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
 
/* Content area below the admin bar and cover */
.news-post-content {
    margin-top: 16px;
}

/* ============================================================
   Encyclopedia list — add to klastyle.css
   ============================================================ */

/* Letter index bar at top */
.encyclopedia-index-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2a2a2a;
}
.encyclopedia-index-letter {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #222;
    border: 1px solid #444;
    border-radius: 4px;
    color: #ffd100;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
}
.encyclopedia-index-letter:hover {
    background: #ffd100;
    color: #181818;
}

/* Letter group heading */
.encyclopedia-group {
    margin-bottom: 20px;
}
.encyclopedia-group-heading {
    color: #ffd100;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
    margin-bottom: 8px;
    font-size: 18px;
}

/* 3-column entry list */
.encyclopedia-entry-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 3;
    column-gap: 24px;
}
.encyclopedia-entry-list li {
    margin-bottom: 4px;
    break-inside: avoid;
}
.encyclopedia-entry-list a {
    color: #ccc;
    text-decoration: none;
    font-size: 13px;
}
.encyclopedia-entry-list a:hover {
    color: #ffd100;
}