/* ============================================================
   CITADEL — main stylesheet
   ============================================================ */

/* --- Reset & base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 48px; /* clear the fixed sitewide chat toggle bar */
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
textarea, input, select, button { font-family: inherit; }

/* --- Layout ----------------------------------------------- */
#site-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.site-main  { flex: 1; padding: 1.5rem 1rem 7rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.container  { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.two-col    { display: grid; grid-template-columns: 1fr 240px; gap: 1.25rem; }
.three-col  { display: grid; grid-template-columns: 170px 1fr 210px; gap: 1.25rem; }
.grid-2     { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3     { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }

/* --- Header ----------------------------------------------- */
.site-header { height: 56px; display: flex; align-items: center; position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; gap: 1.5rem; padding: 0 1.25rem; width: 100%; max-width: 1100px; margin: 0 auto; }
.site-logo { font-size: 17px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.site-nav { display: flex; gap: 18px; flex: 1; }
.site-nav a { font-size: 13px; opacity: .8; transition: opacity .15s; }
.site-nav a:hover { opacity: 1; }
.header-user { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.header-avatar-placeholder { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.header-username { font-size: 13px; }
.header-logout { font-size: 18px; opacity: .5; }
.header-logout:hover { opacity: 1; }
.header-icon { font-size: 15px; position: relative; opacity: .7; }
.header-icon:hover { opacity: 1; }
.icon-badge { position: absolute; top: -5px; right: -6px; width: 14px; height: 14px; border-radius: 50%; font-size: 9px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.header-badge { font-size: 11px; padding: 2px 7px; border-radius: 20px; }

/* --- Cards & sections ------------------------------------- */
.card { border: 0.5px solid; border-radius: 10px; padding: .85rem 1rem; margin-bottom: 12px; }
.card-flat { border-radius: 10px; padding: .85rem 1rem; margin-bottom: 12px; }
.section-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: .75rem; opacity: .7; }
.page-title { font-size: 20px; font-weight: 600; margin-bottom: .25rem; }
.page-sub { font-size: 13px; opacity: .6; margin-bottom: 1.25rem; }

/* --- Buttons ---------------------------------------------- */
.btn { display: inline-block; padding: 7px 18px; border-radius: 8px; font-size: 13px; cursor: pointer; border: 0.5px solid; font-weight: 500; transition: opacity .15s; }
.btn:hover { opacity: .85; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-xs { padding: 3px 9px; font-size: 11px; }
.btn-full { width: 100%; text-align: center; display: block; }
.btn-accent { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--bg) !important; font-weight: 600; }
.btn-danger { }
.btn-ghost { background: transparent !important; }

/* --- Forms ------------------------------------------------ */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 13px; margin-bottom: 5px; opacity: .8; }
.form-input, .form-textarea, .form-select {
  width: 100%; border: 0.5px solid; border-radius: 8px; padding: 8px 12px;
  font-size: 14px; transition: border-color .15s; display: block;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; }
.form-textarea { resize: vertical; min-height: 100px; }
.form-hint { font-size: 12px; margin-top: 4px; opacity: .55; }
.form-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.form-check input { width: 16px; height: 16px; cursor: pointer; }
.form-error { font-size: 13px; padding: 8px 12px; border-radius: 8px; margin-bottom: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* --- Flash messages --------------------------------------- */
.flash { padding: 10px 16px; border-radius: 8px; margin-bottom: 1rem; font-size: 14px; border: 0.5px solid; }
.flash-error { }
.flash-success { }

/* --- Posts ------------------------------------------------ */
.post-block { border: 0.5px solid; border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.post-header { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; border-bottom: 0.5px solid; }
.post-char-name { font-size: 14px; font-weight: 600; }
.post-player { font-size: 11px; opacity: .55; }
.post-body { padding: .85rem 1rem; font-size: 14px; line-height: 1.85; }
.post-body em { font-style: italic; opacity: .8; }
.post-ooc { border-left: 2px solid; margin: 0 1rem .85rem; padding: .45rem .85rem; border-radius: 0 6px 6px 0; }
.post-ooc-label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .5; margin-bottom: 2px; }
.post-ooc-text { font-size: 13px; opacity: .7; }
.post-attachment { margin: 0 1rem .85rem; padding: .6rem .85rem; border: 0.5px solid; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.post-doc-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 0.5px solid; }

/* --- Reply bar -------------------------------------------- */
.reply-bar { border: 0.5px solid; border-radius: 10px; padding: .85rem 1rem; margin-top: 1rem; }
.posting-as { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0.5px solid; border-radius: 8px; margin-bottom: 10px; }
.posting-as-label { font-size: 11px; opacity: .55; }
.posting-as-name { font-size: 13px; font-weight: 600; flex: 1; }
.reply-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.reply-toggle-row { display: flex; gap: 6px; flex-wrap: wrap; }
.html-mode-indicator { font-size: 11px; padding: 3px 8px; border-radius: 6px; border: 0.5px solid; }

/* --- Thread cards ----------------------------------------- */
.thread-card { border: 0.5px solid; border-radius: 10px; padding: .8rem 1rem; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 12px; transition: border-color .15s; }
.thread-card:hover { }
.thread-card-info { flex: 1; min-width: 0; }
.thread-card-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-card-meta { font-size: 12px; opacity: .55; }
.thread-card-count { font-size: 12px; opacity: .55; text-align: right; flex-shrink: 0; }

/* --- Character selector ----------------------------------- */
.char-selector { }
.char-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px; border-radius: 8px; cursor: pointer; margin-bottom: 3px; border: 0.5px solid transparent; transition: background .1s; }
.char-item:hover { }
.char-item.active { }
.char-item-name { font-size: 13px; font-weight: 600; }
.char-item-role { font-size: 10px; opacity: .55; }
.char-check { width: 14px; height: 14px; border-radius: 50%; border: 0.5px solid; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.char-check svg { width: 8px; height: 8px; }

/* --- Tracking sidebar ------------------------------------- */
.tracked-item { padding: 6px 0; border-bottom: 0.5px solid; }
.tracked-item:last-child { border-bottom: none; }
.tracked-title { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracked-meta { font-size: 10px; opacity: .5; }
.tracked-new-badge { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-left: 4px; }

/* --- Thread OOC chat -------------------------------------- */
.thread-chat { border: 0.5px solid; border-radius: 10px; overflow: hidden; }
.tc-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 0.5px solid; cursor: pointer; }
.tc-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tc-messages { height: 160px; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.tc-msg { font-size: 12px; line-height: 1.5; }
.tc-author { font-weight: 600; margin-right: 4px; font-size: 11px; }
.tc-input-row { border-top: 0.5px solid; padding: 7px 8px; display: flex; gap: 6px; }
.tc-input { flex: 1; border: 0.5px solid; border-radius: 6px; padding: 5px 8px; font-size: 12px; }

/* --- Profile ---------------------------------------------- */
.profile-banner { height: 160px; border-radius: 10px 10px 0 0; position: relative; overflow: visible; background: linear-gradient(135deg, var(--bg2), var(--bg3)); }
.profile-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: 10px 10px 0 0; }
.profile-body { border: 0.5px solid; border-top: none; border-radius: 0 0 10px 10px; padding: 0 1.25rem 1.25rem; }
.profile-avatar-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: -32px; margin-bottom: 10px; position: relative; z-index: 2; }
.profile-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 4px solid var(--bg, #120e17); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.profile-avatar-placeholder { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; background: var(--bg2); border: 4px solid var(--bg, #120e17); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.profile-name-row { margin-bottom: 6px; }
.profile-flairs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.profile-bio { font-size: 13px; line-height: 1.7; opacity: .8; margin-bottom: 1rem; }
.profile-custom-html { border: 0.5px solid; border-radius: 8px; padding: .85rem 1rem; margin-bottom: 1rem; font-size: 13px; line-height: 1.7; }
.profile-stats { display: flex; gap: 20px; font-size: 12px; opacity: .6; }

/* --- Characters on profile -------------------------------- */
.char-card { display: flex; gap: 12px; border: 0.5px solid; border-radius: 10px; padding: .85rem 1rem; margin-bottom: 8px; }
.char-card-avatar { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.char-card-avatar-placeholder { width: 52px; height: 52px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; }
.char-card-name { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.char-card-desc { font-size: 12px; opacity: .65; line-height: 1.5; }
.char-stat-row { display: flex; gap: 14px; margin-top: 6px; font-size: 11px; opacity: .5; }

/* --- Realms ----------------------------------------------- */
.realm-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.realm-card { border: 0.5px solid; border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.realm-card:hover { }
.realm-card-banner { height: 60px; position: relative; overflow: hidden; }
.realm-card-banner-tag { position: absolute; bottom: 6px; left: 10px; font-size: 10px; padding: 2px 7px; border-radius: 3px; background: rgba(0,0,0,.5); }
.realm-card-body { padding: .7rem .9rem; }
.realm-card-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.realm-card-desc { font-size: 12px; opacity: .6; line-height: 1.5; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.realm-card-foot { display: flex; justify-content: space-between; align-items: center; }

/* --- Dreamscape grid + cards (realms.php listing) --------- */
.dreamscape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.dreamscape-card { border: 0.5px solid; border-radius: 10px; overflow: hidden; transition: border-color .15s; display: block; text-decoration: none; color: inherit; }
.dreamscape-card:hover { border-color: var(--accent2); }
.dreamscape-locked { opacity: .55; pointer-events: none; }
.dreamscape-card-banner { height: 64px; position: relative; overflow: hidden; background: var(--bg3); }
.dreamscape-card-banner-tag { position: absolute; bottom: 6px; left: 10px; font-size: 10px; padding: 2px 7px; border-radius: 3px; background: rgba(0,0,0,.5); color: var(--accent2); }
.dreamscape-card-body { padding: .75rem 1rem; }
.dreamscape-card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--heading); }
.dreamscape-card-desc { font-size: 12px; color: var(--text2); opacity: .7; line-height: 1.55; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dreamscape-card-foot { display: flex; justify-content: space-between; align-items: center; }

/* --- Cast list (realm.php sidebar) ------------------------ */
.cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 6px; }
.cast-item { text-align: center; }
.cast-item-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin: 0 auto 5px; display: block; }
.cast-item-avatar-placeholder { width: 52px; height: 52px; border-radius: 50%; background: var(--bg3); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; margin: 0 auto 5px; }
.cast-item-name { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-item-player { font-size: 10px; color: var(--muted); }

/* --- Ads page --------------------------------------------- */
.ads-layout { display: grid; grid-template-columns: 1fr 185px; gap: 1rem; }
.thread-ad-card { border: 0.5px solid; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.tac-banner { height: 50px; position: relative; overflow: hidden; }
.tac-banner img { width: 100%; height: 100%; object-fit: cover; }
.tac-banner-placeholder { width: 100%; height: 100%; }
.tac-body { padding: .75rem 1rem; }
.tac-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.tac-blurb { font-size: 12px; opacity: .65; line-height: 1.6; margin-bottom: 8px; }
.tac-foot { display: flex; justify-content: space-between; align-items: center; }
.wanted-ad { padding: 8px 0; border-bottom: 0.5px solid; }
.wanted-ad:last-of-type { border-bottom: none; }
.wanted-ad-author { font-size: 11px; font-weight: 600; margin-bottom: 2px; }
.wanted-ad-body { font-size: 12px; opacity: .65; line-height: 1.5; }
.wanted-ad-time { font-size: 10px; opacity: .4; margin-top: 2px; }

/* --- DMs -------------------------------------------------- */
.dm-layout { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; height: 500px; }
.dm-list { border: 0.5px solid; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.dm-list-header { padding: 10px 14px; border-bottom: 0.5px solid; font-size: 13px; font-weight: 600; }
.dm-convo-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 0.5px solid; cursor: pointer; transition: background .1s; }
.dm-convo-item:hover { }
.dm-convo-item.active { }
.dm-convo-item:last-child { border-bottom: none; }
.dm-convo-av { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.dm-panel { border: 0.5px solid; border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.dm-panel-header { padding: 12px 16px; border-bottom: 0.5px solid; display: flex; align-items: center; gap: 10px; }
.dm-messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.dm-msg { display: flex; flex-direction: column; max-width: 75%; }
.dm-msg.mine { align-self: flex-end; align-items: flex-end; }
.dm-msg.theirs { align-self: flex-start; }
.dm-bubble { font-size: 13px; line-height: 1.6; padding: 8px 14px; border-radius: 14px; }
.dm-msg.mine .dm-bubble { border-bottom-right-radius: 4px; }
.dm-msg.theirs .dm-bubble { border-bottom-left-radius: 4px; border: 0.5px solid; }
.dm-img-preview { border-radius: 10px; overflow: hidden; max-width: 200px; margin-top: 4px; }
.dm-img-preview img { width: 100%; display: block; }
.dm-meta { font-size: 10px; opacity: .45; margin-top: 3px; }
.dm-input-row { border-top: 0.5px solid; padding: 10px 14px; display: flex; gap: 8px; align-items: center; }
.dm-input { flex: 1; border: 0.5px solid; border-radius: 20px; padding: 7px 16px; font-size: 13px; }
.dm-attach-btn { width: 34px; height: 34px; border-radius: 50%; border: 0.5px solid; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; flex-shrink: 0; }

/* --- Flair pills ------------------------------------------ */
.flair-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 3px 8px; border-radius: 4px; vertical-align: middle; }
.selected-flair { outline: 2px solid var(--accent) !important; outline-offset: 1px; }
.fp-gold     { background: linear-gradient(90deg,#3a2a10,#2a1e3a); color: #c9a87c; border: 0.5px solid #5a4a20; }
.fp-silver   { background: #1e1e2e; color: #b0b0d8; border: 0.5px solid #3a3a5a; }
.fp-mile     { background: #1e2a3a; color: #7ab8e8; border: 0.5px solid #2a3a5a; }
.fp-event    { background: #1e3a1e; color: #7ec99a; border: 0.5px solid #2a5a2a; }
.fp-seasonal { background: #2a1a0e; color: #e8a870; border: 0.5px solid #6a4020; }
.fp-mystery  { background: #0e0e16; color: #7060b0; border: 0.5px solid #30306080; font-style: italic; }
.fp-uwu      { background: linear-gradient(90deg,#2e1a2e,#1e1a2e); color: #f0b0d8; border: 0.5px solid #6a3a6a; }
.fp-soft     { background: linear-gradient(90deg,#2a1e2e,#2e1e2a); color: #e8c0e8; border: 0.5px solid #5a3a5a; }
.fp-fairy    { background: linear-gradient(90deg,#1e1a2e,#2e1a1e); color: #c0a0f0; border: 0.5px solid #6040a0; }
.fp-egirl    { background: linear-gradient(90deg,#1a0e1e,#2a0a1a); color: #e060a0; border: 0.5px solid #8a1a5a; }
.fp-eboy     { background: linear-gradient(90deg,#0e0e14,#14101e); color: #8060c0; border: 0.5px solid #4a3060; }
.fp-void     { background: linear-gradient(90deg,#08080e,#10081e); color: #6040a0; border: 0.5px solid #3a2060; }
.fp-cherry   { background: linear-gradient(90deg,#2a0a14,#1e0a1e); color: #e8607a; border: 0.5px solid #8a2040; }
.fp-glitch   { background: #080810; color: #40e0b0; border: 0.5px solid #20806a; font-family: monospace; }
.fp-cottage  { background: linear-gradient(90deg,#1a2010,#1e2818); color: #a0c870; border: 0.5px solid #4a6030; }
.fp-mod      { background: #0e1e2e; color: #6ab4e8; border: 0.5px solid #2a5a8a; }

/* --- Tags ------------------------------------------------- */
.tag { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 3px; }
.tag-open     { background: #1e3a2a; color: #5cb88a; }
.tag-looking  { background: #2a1e3a; color: #9a7cc7; }
.tag-private  { background: #2a1e3a; color: #9a7cc7; }
.tag-nsfw     { background: #3a1e1e; color: #c97a7a; }
.tag-realm    { background: #2a1e3a; color: #9a7cc7; }
.tag-locked   { background: #1e1e1e; color: #4a4a6a; border: 0.5px solid #3a3a5a; }
.tag-bumped   { color: #5cb88a; font-size: 11px; }
.tag-premium  { background: linear-gradient(90deg,#3a2a10,#2a1e3a); color: #c9a87c; border: 0.5px solid #5a4a20; font-size: 10px; padding: 2px 7px; border-radius: 3px; display: inline-block; }

/* --- Sitewide chat ---------------------------------------- */
.sitewide-chat { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--header-bg, #1a1118); border-top: 0.5px solid var(--border, #2e2238); }
.sc-toggle { display: flex; align-items: center; justify-content: space-between; padding: 9px 1.5rem; cursor: pointer; }
.sc-label { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.sc-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #5cb88a; display: inline-block; }
.sc-count { font-size: 11px; opacity: .6; }
.sc-body { display: flex; height: 180px; border-top: 0.5px solid; }
.sc-messages { flex: 1; overflow-y: auto; padding: 10px 1.5rem; display: flex; flex-direction: column; gap: 6px; }
.sc-msg { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.sc-author { font-weight: 600; font-size: 12px; flex-shrink: 0; min-width: 70px; }
.sc-text { opacity: .8; line-height: 1.5; }
.sc-time { font-size: 10px; opacity: .4; flex-shrink: 0; margin-top: 1px; }
.sc-sidebar { width: 110px; border-left: 0.5px solid var(--border, #2e2238); padding: 10px; overflow-y: auto; flex-shrink: 0; background: var(--bg, #120e17); }
.sc-sidebar-title { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6e5c80); margin-bottom: 8px; }
.sc-online-user { font-size: 12px; padding: 2px 0; display: flex; align-items: center; gap: 5px; color: var(--text2, #c8bdd6); }
.sc-input-row { border-top: 0.5px solid; padding: 8px 1.5rem; display: flex; gap: 8px; }
.sc-input { flex: 1; border: 0.5px solid; border-radius: 8px; padding: 6px 12px; font-size: 13px; }
.sc-send { border: 0.5px solid; border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.sc-login-prompt { font-size: 13px; opacity: .5; }
.sc-login-prompt a { opacity: 1; }
.sc-loading { opacity: .4; font-size: 13px; }

/* --- Username styles -------------------------------------- */
.username-display { }
.username-gradient { background: linear-gradient(90deg,#c9a87c,#e89ab0,#9a7cc7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.username-glow { text-shadow: 0 0 8px currentColor; }

/* --- Achievement / flair shop ----------------------------- */
.achieve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.achieve-card { border: 0.5px solid; border-radius: 10px; padding: .7rem .9rem; display: flex; gap: 10px; align-items: flex-start; }
.achieve-icon { font-size: 20px; flex-shrink: 0; width: 30px; text-align: center; }
.achieve-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.achieve-how { font-size: 11px; opacity: .55; line-height: 1.4; }
.achieve-secret .achieve-name { opacity: .35; }
.achieve-secret .achieve-how { opacity: .25; font-style: italic; }
.unlocked-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5cb88a; margin-left: 5px; vertical-align: middle; }

/* --- Settings / appearance -------------------------------- */
.theme-swatch-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.theme-swatch { border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .15s; }
.theme-swatch.selected { border-color: var(--accent); }
.theme-swatch-header { height: 32px; display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 600; }
.theme-swatch-body { height: 44px; padding: 8px 10px; }
.theme-swatch-line { height: 5px; border-radius: 3px; margin-bottom: 5px; }
.theme-swatch-name { font-size: 11px; text-align: center; padding: 5px 0; opacity: .7; }
.theme-locked { opacity: .4; pointer-events: none; }
.name-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.name-style-opt { border: 1.5px solid; border-radius: 10px; padding: 10px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s; }
.name-style-opt.selected { border-color: #c9a87c; }

/* --- Utility ---------------------------------------------- */
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-1 { gap: 6px; }
.gap-2 { gap: 10px; }
.gap-3 { gap: 1rem; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap   { flex-wrap: wrap; }
.truncate    { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muted       { opacity: .6; }
.small       { font-size: 12px; }
.strong      { font-weight: 600; }
.divider     { border: none; border-top: 0.5px solid; margin: 1rem 0; opacity: .3; }
.premium-label { display: inline-flex; align-items: center; gap: 4px; }

/* --- Responsive ------------------------------------------- */
@media (max-width: 768px) {
  .three-col { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .realm-grid { grid-template-columns: 1fr; }
  .ads-layout { grid-template-columns: 1fr; }
  .dm-layout { grid-template-columns: 1fr; height: auto; }
  .site-nav { display: none; }
  .achieve-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--header-bg, #1a1118);
  border-top: 0.5px solid var(--border, #2e2238);
  padding: 1.25rem 1rem 2rem;
  margin-top: 3rem;
  /* no margin-bottom needed - body padding handles chat bar clearance */
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: center;
}
.footer-links a {
  font-size: 11px;
  color: var(--text2);
  text-decoration: none;
  transition: color .15s;
}
.footer-links a:hover { color: var(--accent); }
.footer-premium { color: var(--accent) !important; font-weight: 500; }
.footer-copy {
  font-size: 11px;
  color: var(--muted);
}

/* ============================================================
   NAV PREMIUM LINK
   ============================================================ */
.nav-premium {
  color: var(--accent) !important;
  font-weight: 500;
}

/* ============================================================
   MOD BADGE
   ============================================================ */
.badge-mod {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1e3a1e, #1e2a3a);
  color: #7ec99a;
  border: 0.5px solid #2a5a2a;
  vertical-align: middle;
}

/* ============================================================
   TAG STYLES (works + threads)
   ============================================================ */
.tag-genre        { background: #2a1e10; color: #c9a87c; border: 0.5px solid #5a4020; }
.tag-fandom       { background: #0e2a28; color: #7ec8c0; border: 0.5px solid #1a5048; }
.tag-warning      { background: #2a1010; color: #e08888; border: 0.5px solid #5a2020; }
.tag-relationship { background: #2a1a2e; color: #c8a0e8; border: 0.5px solid #5a3068; }
.tag-active       {
  background: var(--badge-bg) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  font-weight: 600;
}

/* ============================================================
   WORKS — cover card layout
   ============================================================ */
.work-cover {
  width: 60px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 0.5px solid var(--border);
  flex-shrink: 0;
}
.work-cover-placeholder {
  width: 60px;
  height: 80px;
  border-radius: 6px;
  background: var(--bg3);
  border: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--muted);
  flex-shrink: 0;
}

/* ============================================================
   REFERRAL PROGRESS BARS
   ============================================================ */
.referral-progress {
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
}
.referral-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s;
}

/* ============================================================
   CHAPTER EDITOR
   ============================================================ */
#chapter-body {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 14px;
  line-height: 1.85;
}

/* ============================================================
   FLASH INFO (used in works.php)
   ============================================================ */
.flash-info {
  background: color-mix(in srgb, var(--info) 12%, var(--bg2));
  border-color: var(--info);
  color: var(--info);
}

/* ── Notification bell ─────────────────────────────────── */
.notif-wrap { position: relative; display: inline-flex; }
.notif-bell { background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px 6px; position: relative; color: var(--text2); line-height: 1; }
.notif-bell:hover { color: var(--accent); }
.notif-dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 320px; background: var(--bg2); border: 0.5px solid var(--border); border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.4); z-index: 200; overflow: hidden; }
.notif-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 0.5px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text2); }
.notif-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 0.5px solid var(--border); font-size: 12px; color: var(--text2); text-decoration: none; transition: background .1s; align-items: flex-start; }
.notif-item:hover { background: var(--bg3, var(--bg)); }
.notif-item.unread { background: color-mix(in srgb, var(--accent) 6%, var(--bg2)); }
.notif-item.unread:hover { background: color-mix(in srgb, var(--accent) 10%, var(--bg2)); }
.notif-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.notif-text { flex: 1; line-height: 1.5; }
.notif-text strong { color: var(--accent2); font-weight: 600; }
.notif-time { font-size: 10px; color: var(--muted); margin-top: 2px; }
.notif-loading { padding: 20px; text-align: center; color: var(--muted); font-size: 12px; }
.notif-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 12px; }
.notif-see-all { display: block; padding: 10px 14px; text-align: center; font-size: 12px; color: var(--accent2); border-top: 0.5px solid var(--border); text-decoration: none; }
.notif-see-all:hover { background: var(--bg3, var(--bg)); }

/* ── User menu button ──────────────────────────────────── */
.user-menu-btn { background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:6px; padding:2px 4px; border-radius:6px; color:var(--text); }
.user-menu-btn:hover { background:var(--bg2); }
.notif-bell-btn { background:none; border:none; cursor:pointer; font-size:15px; padding:4px 6px; position:relative; color:var(--text2); line-height:1; }
.notif-bell-btn:hover { color:var(--accent); }

/* ── Flair drag reorder ────────────────────────────────── */
.flair-reorder-item { cursor:grab !important; }
.flair-reorder-item:active { cursor:grabbing !important; }
.flair-reorder-item.drag-over-left { border-left: 3px solid var(--accent) !important; margin-left: -3px; }
.flair-reorder-item.drag-over-right { border-right: 3px solid var(--accent) !important; }
.flair-reorder-item.dragging { opacity: 0.4; }

/* ── Generated world map backgrounds ──────────────────── */
.map-gen-forest { background: radial-gradient(ellipse at 30% 40%, #1a2e1a 0%, #0e1a0e 40%, #060e06 100%); }
.map-gen-cosmic { background: radial-gradient(ellipse at 60% 30%, #1a0e2e 0%, #0e0e2e 50%, #06060e 100%); }
.map-gen-ember  { background: radial-gradient(ellipse at 50% 60%, #2e1a0a 0%, #1a0e06 50%, #0a0604 100%); }
.map-gen-slate  { background: radial-gradient(ellipse at 50% 30%, #0e1a2e 0%, #0a1020 60%, #060810 100%); }
.map-style-pick { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.map-style-opt  { border-radius:8px; overflow:hidden; border:2px solid transparent; cursor:pointer; transition:border-color .15s; }
.map-style-opt:hover { border-color:var(--border2); }
.map-style-opt.selected { border-color:var(--accent); }
.map-style-thumb { height:44px; }
.map-style-name  { font-size:10px; text-align:center; padding:4px; background:var(--bg2); color:var(--muted); }