/* ==========
   Fonts + Reset
   ========== */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200..900&display=swap');

*,
*::before,
*::after { box-sizing: border-box; }

html,body { height: 100%; margin: 0; }

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

body{
  margin:0;
  font-family:"Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height:1.6;
  color:#e6e6f0;
  background: #1b0f2a url("/background.gif") repeat;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ambient lighting / stars */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 20%, rgba(180,130,255,.10), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(110,50,200,.18), transparent 60%);
  z-index:0;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 60%, #fff, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff, transparent);
  opacity:.35;
  z-index:0;
}

a { color:#e6c46a; text-decoration:none; }
a:hover { color:#fff; }

/* ==========
   Layout grid
   ========== */

.sidebar-group{
  max-width:1400px;
  margin:30px auto;
  display:grid;
  grid-template-columns:220px minmax(640px,1fr) 220px;
  gap:28px;
  position:relative;
  z-index:1;
}

.main-column{ grid-column:2; display:flex; flex-direction:column; gap:20px; }

/* mobile fallback */
@media (max-width:1000px){
  .sidebar-group{ grid-template-columns: 1fr; padding: 18px; }
  .main-column, #tab-content { grid-column:auto; }
}

/* ==========
   Generic panels / windows (unified look)
   ========== */

.panel,
.sidebar,
.sidebar-box,
.wide-sidebar,
.box {
  background: linear-gradient(180deg,#2a1838,#24132a);
  border:1px solid rgba(58,34,82,0.9);
  border-radius:8px;
  box-shadow:
    2px 2px #483258,
    0 10px 28px rgba(0,0,0,.45);
  overflow:hidden;
  color: inherit;
}

/* title bars used by windows */
.title-bar,
.box-title-bar {
  padding:10px 14px;
  font-size:14px;
  font-weight:600;
  background:linear-gradient(to right,#6f4c91,#8a6bb3);
  border-bottom:1px solid rgba(0,0,0,.25);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* small right controls in title bars */
.right { display:flex; gap:6px; align-items:center; }
.right span {
  display:flex;
  width:18px; height:18px;
  align-items:center; justify-content:center;
  opacity:.65; cursor:pointer;
  transition: color .12s, opacity .12s;
}
.right span:hover{ color:#e6c46a; opacity:1; }

/* generic inner content */
.inner {
  padding:12px 14px;
  font-size:14px;
  line-height:1.55;
}
.inner.collapsed { display:none; }

/* ==========
   Profile image / icons
   ========== */

.icon{
  border-radius:50%;
  border:2px solid #8F6FAA;
  display:block;
}

/* ==========
   Banner area
   ========== */

.banner{
  width:100%;
  height:120px;
  border-radius:6px;
  margin-bottom:10px;
  background:url("/view.gif") center/cover no-repeat;
}

/* ==========
   Floating bookshelf (nav)
   ========== */

.main-header { position:relative; overflow:visible; }

/* ==========================
   Spellbook navigation
========================== */

.nav{
  display:flex;
  gap:10px;
  align-items:flex-end;

  margin-top:-36px;
  margin-bottom:18px;

  position:relative;
}

/* shelf */

.nav::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;

  height:10px;

  background:linear-gradient(#3a2552,#1b0f2a);
  border-radius:4px;

  box-shadow:
    0 4px 10px rgba(0,0,0,.5),
    inset 0 1px rgba(255,255,255,.04);
}

/* base book */

.nav button{
  position:relative;
  min-width:24px;
  min-height:110px;

  padding:10px 8px;

  writing-mode:vertical-rl;
  text-orientation:mixed;

  transform:rotate(180deg);
  bottom:2px;

  font-family:serif;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:#e6e6f0;

  background:linear-gradient(#2c1a3d,#1a0f24);

  border:1px solid rgba(44,26,61,.9);
  border-radius:6px;

  cursor:pointer;

  text-align:center;
  line-height:1.2;

  white-space:normal;

    box-shadow:
    0 6px 12px rgba(0,0,0,.45),
    inset 0 1px rgba(255,255,255,.05),
    inset 0 -2px rgba(0,0,0,.45);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

/* book colors */

.nav button:nth-child(odd){
  height:126px;
}

.nav button:nth-child(even){
  height:134px;
}

.nav button::marker{display:none;}

.nav button::selection{background:none;}

.nav button span{
  pointer-events:none;
}

.nav button::before{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:6px;
  height:2px;
  background:#2a1838;
}

.nav button::after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:2px;
  height:3px;
  background:#7b1fa2;
   box-shadow:
   0 -1px rgba(255,255,255,.05);

}

/* if a space exists, allow wrapping */

.nav button:has(br),
.nav button:has(span){
  min-width:64px;
}

/* ensure multi-word labels wrap cleanly */

.nav button{
  word-break:normal;
  overflow-wrap:break-word;
}

/* page edge and colored bottom stripe */
.nav button::before{
  content:"";
  position:absolute; left:2px; right:2px; bottom:6px; height:2px; background:#2a1838; border-radius:2px;
}
.nav button::after{
  content:"";
  position:absolute; left:2px; right:2px; bottom:2px; height:3px; background:#7b1fa2; border-radius:2px;
}

.nav button:hover{ transform: rotate(180deg) translateY(6px); box-shadow: 0 12px 22px rgba(0,0,0,.5); }
.nav button.active{ transform: rotate(180deg) translateY(-2px) rotate(-2deg); box-shadow: 0 18px 34px rgba(0,0,0,.6); }

/* helper: wider book when needed */
.nav button.wide { min-width:72px; padding:10px 14px; }

/* ==========
   Floating buttons for gallery / frames
   ========== */

.header-actions {
  display:flex;
  gap:10px;
  align-items:center;
  position: absolute;
  right: 28px;
  top: -56px;
  z-index: 31;
}

.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  border:1px solid rgba(112,80,138,.25);
  background: linear-gradient(180deg,#6f4c91,#5c3a78);
  color:#f0e6fb;
  box-shadow: 0 8px 18px rgba(0,0,0,.5);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 26px rgba(0,0,0,.6); }

/* specific action buttons (place and wire later) */
.btn.gallery { background: linear-gradient(180deg,#6b4f7a,#4a315f); }
.btn.frames  { background: linear-gradient(180deg,#5a5575,#41334f); }

/* ==========
   Blog  panel
   ========== */

.grimoire-panel{
  background:#1a0f24;
  border:1px solid #3a2252;
  border-radius:8px;
  box-shadow: 0 10px 32px rgba(0,0,0,.6);
  margin-top:12px;
  overflow:visible;
}

/* title (top of panel) */
.blog-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:serif;
  font-size:28px;
  color:#e8d5f8;
  padding:20px 24px 16px;
  position:relative;
}

/* soft divider/etch line */
.blog-title::after{
  content:"";
  position:absolute;
  left:24px; right:24px; bottom:8px;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(179,136,255,.35), transparent);
  filter: drop-shadow(0 0 6px rgba(179,136,255,.2));
}

/* wrapper inside the panel that holds posts */
.blog-wrapper{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:22px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.02));
  border-radius: 0 0 8px 8px;
}

/* individual post card */
.blog-post{
  border:1px solid #3a2252;
  border-radius:6px;
  background: rgba(20,10,30,.55);
  box-shadow: 0 8px 16px rgba(0,0,0,.45);
  overflow:hidden;
}

/* post header */
.blog-post-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  background: linear-gradient(90deg, rgba(60,30,90,.06), transparent);
  cursor:pointer;
}
.blog-post-title{ font-family:serif; font-size:20px; color:#e8d5f8; letter-spacing:.02em; }

/* date with icon */
.blog-date{
  font-size:13px;
  color:#bba5d6;
  display:flex; align-items:center; gap:6px; margin-top:4px;
}

/* chevron icon */
.blog-chevron{ width:18px; height:18px; color:#b388ff; transition: transform .25s ease; }
.blog-post.collapsed .blog-chevron{ transform: rotate(-90deg); }

/* post body */
.blog-post-body{ padding:18px; border-top:1px solid rgba(58,34,82,.6); }
.blog-post-body.collapsed{ display:none; }

/* image + text */
.blog-image{ width:100%; border-radius:4px; margin-bottom:14px; object-fit:cover; display:block; }
.blog-text{ color:#d8cdb8; font-size:15px; line-height:1.65; }

/* tags */
.blog-tags{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.blog-tag{
  background:#2c1a3d;
  border:1px solid #3a2252;
  border-radius:4px;
  padding:5px 8px;
  font-size:12px;
  color:#bfa9d8;
  cursor:pointer;
  transition: background .12s;
}
.blog-tag:hover{ background:#3a2252; color:#fff; }

/* fix first post top rounding so it blends under the divider (optional) */
.blog-post:first-child { border-top-left-radius:0; border-top-right-radius:0; }

/* ==========
   Lucide icons normalization
   (SVG placeholders: <i data-lucide="..."></i>)
   ========== */

[data-lucide] { width:18px; height:18px; stroke:#b388ff; stroke-width:1.8; vertical-align:-3px; display:inline-block; }
.blog-title [data-lucide] { width:24px; height:24px; margin-right:8px; vertical-align:-4px; }
.blog-date [data-lucide] { width:14px; height:14px; stroke:#9575cd; margin-right:6px; vertical-align:-2px; }

/* ==========
   Music player
   ========== */

.player{
  background:#70508A;
  padding:12px;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}
.row{ display:flex; gap:6px; }
.miniBtn{
  flex:1; padding:5px; border:none; border-radius:6px; background:#483258; color:#fff; cursor:pointer;
}
.miniBtn:hover{ background:#2a2a3a; }
.progress{ margin:8px 0; }
.progress input{ width:100%; }

/* ==========
   FFXIV card styles (same visual language)
   ========== */

.ffxiv-window{ border:1px solid #3a2252; border-radius:6px; overflow:hidden; background:linear-gradient(#161018,#1a0f24); }
.spellbook-page{ background:transparent; padding:16px; }
.ffxiv-label{ font-size:11px; color:#9575cd; text-transform:uppercase; }
.ffxiv-name{ font-size:20px; font-family:serif; color:#e8d5f8; }
.ffxiv-pill{ display:inline-block; padding:4px 8px; border:1px solid #3a2252; background:#120a18; }
.ffxiv-jobs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ffxiv-job{ display:flex; justify-content:space-between; font-size:13px; color:#bfa9d8; }
.lvl{ color:#d4b8eb; }

/* ==========
   Small utilities
   ========== */

.hidden{ display:none; }
.center{ text-align:center; }
.kv { font-weight:700; }

/* ==========
   Responsive tweaks
   ========== */

@media (max-width:1000px){
  .nav { position:static; top:auto; left:auto; right:auto; width:auto; gap:8px; margin-bottom:8px; }
  .header-actions { position: static; margin-left:auto; }
  .blog-title { font-size:22px; padding:14px; }
  .blog-wrapper { padding:16px; gap:18px; }
  .nav button { min-height:96px; min-width:56px; writing-mode:vertical-rl; transform:none; }
}


/* ================================
   FFXIV JOB PANEL (compact)
================================ */

.ffxiv-role{
  margin:14px 0;
}

/* role headers */

.ffxiv-role-title{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;

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

  padding-bottom:6px;
  margin-bottom:8px;

  border-bottom:1px solid rgba(120,80,160,.35);
}

/* job grid */

.ffxiv-jobs{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:16px;
  row-gap:6px;
}

/* job rows */

.ffxiv-job{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:#cdbbe8;
}

/* job level */

.ffxiv-job .lvl{
  font-weight:600;
  color:#d4b8eb;
}

/* XIV job panel scrolling */

#ffxiv-sidebar .ffxiv-window:last-child .spellbook-page{
  max-height:420px;
  overflow-y:auto;
}

/* custom scrollbar */

#ffxiv-sidebar .spellbook-page::-webkit-scrollbar{
  width:6px;
}

#ffxiv-sidebar .spellbook-page::-webkit-scrollbar-track{
  background:transparent;
}

#ffxiv-sidebar .spellbook-page::-webkit-scrollbar-thumb{
  background:#70508A;
  border-radius:4px;
}

#ffxiv-sidebar .spellbook-page::-webkit-scrollbar-thumb:hover{
  background:#8a6bb3;
}

.blog-post-body.collapsed{
  display:none;
}

/* recipe step blocks */

.recipe-step{
  padding:14px;
  margin-bottom:12px;
  line-height:1.6;
}


/* collapsible chef notes */

.recipe-note{

  border:1px solid #3a2252;
  border-radius:6px;

  margin-bottom:12px;

  background:rgba(20,10,35,.65);
}

.recipe-note-header{
  padding:10px 14px;

  display:flex;
  align-items:center;

  gap:8px;

  cursor:pointer;

  font-size:13px;
  color:#c8a8ff;
}

.recipe-note-body{

  padding:12px 14px;
  border-top:1px solid #3a2252;
}

.recipe-note-body.collapsed{
  display:none;
}

.recipe-step{

  padding:14px 16px;
  margin-bottom:12px;
}

.recipe-step-title{

  font-weight:600;
  font-size:15px;
  color:#e8d5f8;
}

.recipe-step-desc{

  font-size:13px;
  color:#cdb8e8;

  margin-top:4px;
  line-height:1.5;
}

/* modal */

#commission-modal{
position:fixed;
inset:0;

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

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

z-index:9999;
}

.commission-modal-inner{
background:#1a0f24;
border:1px solid #3a2252;

padding:26px;
border-radius:8px;

max-width:520px;
width:90%;
}

/* queue */

.commission-row{
display:flex;
justify-content:space-between;
align-items:center;

padding:8px 0;
border-bottom:1px solid #2c1a3d;
}

/* slot bar */

.slot-bar{
height:8px;
background:#2c1a3d;
border-radius:6px;
overflow:hidden;
margin:12px 0;
}

.slot-fill{
height:100%;
background:linear-gradient(90deg,#8a6bb3,#b388ff);
}
.commission-control{
text-align:center;
padding:30px 20px;
}

.commission-status-big{
font-size:28px;
font-weight:700;
letter-spacing:.05em;
margin-bottom:6px;
}

.commission-status-big.active{
color:#7fffa6;
}

.commission-status-big.break{
color:#ff7f9f;
}

.commission-slot-display{
font-size:18px;
font-weight:700;
margin-bottom:12px;
}

.slot-bar-large{
height:10px;
background:#2c1a3d;
border-radius:10px;
overflow:hidden;
margin:10px auto 20px auto;
max-width:400px;
}

.slot-fill-large{
height:100%;
background:linear-gradient(90deg,#8a6bb3,#b388ff);
}
.commission-queue-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:14px;
}

.queue-card{
background:#1a0f24;
border:1px solid #3a2252;
border-radius:6px;

padding:12px;
text-align:center;

position:relative;
}

.queue-number{
font-size:12px;
opacity:.6;
}

.queue-user{
font-weight:600;
margin-top:4px;
}

.queue-type{
font-size:12px;
opacity:.7;
margin-top:2px;
}

.queue-status-dot{
width:10px;
height:10px;
border-radius:50%;

position:absolute;
top:8px;
right:8px;
}
.status-paid .queue-status-dot{ background:#ffe066; }
.status-sketch .queue-status-dot{ background:#6bd0ff; }
.status-in-progress .queue-status-dot{ background:#8aff9c; }
.status-final-details .queue-status-dot{ background:#ff9f6b; }
.status-finished .queue-status-dot{ background:#888; }
.commission-gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin:10px 0 14px 0;
}

.commission-frame{
border:1px solid #3a2252;
background:#120a18;
border-radius:6px;
overflow:hidden;
}

.commission-frame img{
width:100%;
display:block;
}

.arcane-btn{

background:linear-gradient(#5e3b85,#2c1a3d);

border:1px solid #8a6bb3;
border-radius:6px;

padding:10px 18px;

font-weight:600;
letter-spacing:.05em;

color:#e8d5f8;

cursor:pointer;

box-shadow:
0 0 10px rgba(179,136,255,.25),
inset 0 0 8px rgba(0,0,0,.45);

transition:.15s;
}

.arcane-btn:hover{

transform:translateY(-2px);

box-shadow:
0 0 16px rgba(179,136,255,.45),
inset 0 0 8px rgba(0,0,0,.45);

}

.commission-contact-box{

margin-top:20px;

border:1px solid #3a2252;
border-radius:6px;

padding:16px;

background:#120a18;
}

.contact-title{
font-weight:700;
margin-bottom:10px;
}

.kofi-btn{

display:inline-block;

background:#ff5e5e;

padding:8px 8px;
border-radius:6px;

color:white;
font-weight:600;

margin-bottom:12px;
}

.contact-alt{
font-size:13px;
opacity:.8;
margin-top:6px;
}

.contact-email{
font-weight:600;
margin-top:4px;
color:#e6c46a;
}

.queue-legend{

margin-top:16px;

border-top:1px solid #3a2252;
padding-top:10px;

font-size:13px;
}

.legend-title{
font-weight:600;
margin-bottom:6px;
}

.legend-row{
display:flex;
align-items:center;
gap:6px;
margin-bottom:4px;
}

.legend-dot{
width:10px;
height:10px;
border-radius:50%;
display:inline-block;
}

.legend-dot{
width:10px;
height:10px;
border-radius:50%;
display:inline-block;
}

.legend-dot.status-paid{ background:#ffe066; }
.legend-dot.status-sketch{ background:#6bd0ff; }
.legend-dot.status-in-progress{ background:#8aff9c; }
.legend-dot.status-final-details{ background:#ff9f6b; }
.legend-dot.status-finished{ background:#888; }

/* ======================================
   COMMISSION TERMS MODAL
====================================== */

#commission-modal{
position:fixed;
inset:0;

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

background:rgba(0,0,0,.65);
backdrop-filter:blur(4px);

z-index:9999;
}

.commission-modal-inner{
background:#1a0f24;

border:1px solid #3a2252;
border-radius:8px;

padding:28px;

max-width:640px;
width:min(92vw, 640px);

box-shadow:
0 0 20px rgba(0,0,0,.6),
inset 0 0 30px rgba(0,0,0,.35);

text-align:left;
}

.commission-modal-inner h3{
margin:0;
font-family:serif;
font-size:22px;
color:#e8d5f8;
}

.commission-terms-intro{
font-size:13px;
letter-spacing:.08em;
text-transform:uppercase;
color:#d6bfef;
}

.commission-terms-text{
max-height:55vh;
overflow-y:auto;
padding:18px;
border:1px solid rgba(88,54,117,.7);
border-radius:10px;
background:rgba(14,8,20,.75);
box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
font-size:14px;
line-height:1.6;
color:#d9cde8;
margin-bottom:20px;
}

.commission-terms-text p,
.commission-terms-text ul{
margin:0 0 14px;
}

.commission-terms-text p:last-child,
.commission-terms-text ul:last-child{
margin-bottom:0;
}

.commission-terms-text ul{
padding-left:20px;
}

.commission-terms-text li + li{
margin-top:8px;
}

#terms-agree{
background:linear-gradient(#5e3b85,#2c1a3d);

border:1px solid #8a6bb3;
border-radius:6px;

padding:10px 20px;

font-weight:600;
letter-spacing:.05em;

color:#e8d5f8;

cursor:pointer;

box-shadow:
0 0 10px rgba(179,136,255,.25),
inset 0 0 8px rgba(0,0,0,.45);

transition:.15s;
}

#terms-agree:hover{
transform:translateY(-2px);

box-shadow:
0 0 16px rgba(179,136,255,.45),
inset 0 0 8px rgba(0,0,0,.45);
}

/* ======================================
   SIDEBAR STACK + SEARCH
====================================== */

.sidebar-stack{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.sidebar-note{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#bca5d8;
}

.sidebar-search-input{
  width:100%;
  padding:10px 12px;
  border:1px solid #4d3268;
  border-radius:6px;
  background:#140c1c;
  color:#f2eaff;
  font:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.sidebar-search-input::placeholder{
  color:#8f77aa;
}

.sidebar-search-input:focus{
  outline:none;
  border-color:#8a6bb3;
  box-shadow:0 0 0 2px rgba(138,107,179,.18);
}

.sidebar-search-input:disabled{
  opacity:.7;
  cursor:not-allowed;
}

.sidebar-search-btn{
  padding:8px 12px;
  border:1px solid #4d3268;
  border-radius:6px;
  background:linear-gradient(180deg,#4a315f,#2b1a3c);
  color:#eadffd;
  font:inherit;
  font-size:13px;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease;
}

.sidebar-search-btn:hover{
  transform:translateY(-1px);
  border-color:#8a6bb3;
}

.sidebar-search-meta{
  font-size:13px;
  color:#c9b6df;
  line-height:1.5;
}

#search-sidebar .inner{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ======================================
   NAV POLISH
====================================== */

.nav button{
  font-family:Georgia, "Times New Roman", serif;
  font-size:14px;
  font-weight:300;
  letter-spacing:.12em;
  background:linear-gradient(var(--book-top, #2c1a3d), var(--book-bottom, #1a0f24));
  border-left:3px solid var(--book-accent, #2a1445);
  box-shadow:
    inset 2px 0 0 var(--book-shade, rgba(0,0,0,.22)),
    0 6px 12px rgba(0,0,0,.45),
    inset 0 1px rgba(255,255,255,.05),
    inset 0 -2px rgba(0,0,0,.45);
}

.nav button::after{
  background:var(--book-stripe, #7b1fa2);
}

.nav button:hover{
  transform:rotate(180deg) translateY(-6px);
  box-shadow:
    inset 2px 0 0 var(--book-shade, rgba(0,0,0,.22)),
    0 12px 22px rgba(0,0,0,.5),
    inset 0 1px rgba(255,255,255,.08),
    inset 0 -2px rgba(0,0,0,.5);
}

.nav button.active{
  transform:rotate(180deg) translateY(-8px) rotate(-2deg);
  box-shadow:
    inset 2px 0 0 var(--book-shade, rgba(0,0,0,.22)),
    0 18px 34px rgba(0,0,0,.6),
    inset 0 1px rgba(255,255,255,.1),
    inset 0 -3px rgba(0,0,0,.6);
}

.nav button.book-short{ height:124px; }
.nav button.book-mid{ height:129px; }
.nav button.book-tall{ height:134px; }
.nav button.book-lofty{ height:141px; }
.nav button.book-high{ height:145px; }
.nav button.book-taller{ height:148px; }
.nav button.book-grand{ height:154px; }

.nav button.book-wide{
  min-width:72px;
  padding:10px 14px;
}

.nav button.book-slim{
  min-width:58px;
  padding:10px 10px;
}

.book-plum{
  --book-top:#4a2771;
  --book-bottom:#1f112b;
  --book-accent:#321751;
  --book-stripe:#8e65c0;
  --book-shade:rgba(29, 10, 47, .42);
}

.book-sky{
  --book-top:#6b2030;
  --book-bottom:#271015;
  --book-accent:#4a1620;
  --book-stripe:#c45f74;
  --book-shade:rgba(46, 10, 17, .42);
}

.book-amber{
  --book-top:#28527a;
  --book-bottom:#0f1f2d;
  --book-accent:#1b3956;
  --book-stripe:#72a9d6;
  --book-shade:rgba(10, 24, 39, .42);
}

.book-olive{
  --book-top:#3c5422;
  --book-bottom:#17200f;
  --book-accent:#293916;
  --book-stripe:#85b25b;
  --book-shade:rgba(15, 23, 9, .42);
}

.book-rose{
  --book-top:#6a2747;
  --book-bottom:#28101b;
  --book-accent:#4a1730;
  --book-stripe:#c05b86;
  --book-shade:rgba(39, 11, 24, .42);
}

.book-copper{
  --book-top:#6a3b2a;
  --book-bottom:#25140f;
  --book-accent:#4b291d;
  --book-stripe:#c98361;
  --book-shade:rgba(41, 20, 12, .42);
}

.book-indigo{
  --book-top:#2d3d67;
  --book-bottom:#12192b;
  --book-accent:#202d4f;
  --book-stripe:#7f9ed7;
  --book-shade:rgba(14, 22, 39, .42);
}

/* ======================================
   LEFT SIDEBAR ALIGNMENT
====================================== */

.sidebar > .inner,
.mini-sidebar > .inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}

.sidebar > .inner > *,
.mini-sidebar > .inner > *{
  width:100%;
}

.sidebar .icon{
  margin:0 auto;
}

/* ======================================
   PLAYER REDESIGN
====================================== */

.player{
  --moon-image:none;
  width:100%;
  max-width:214px;
  margin:0 auto;
  padding:16px 14px 16px;
  border:1px solid rgba(106,78,132,.92);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(183,149,255,.16), transparent 44%),
    linear-gradient(180deg, #5d4478 0%, #382444 76%, #26182f 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.38);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  text-align:center;
}

.player-meta{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.player-title{
  font-family:Georgia, "Times New Roman", serif;
  font-size:18px;
  line-height:1.08;
  color:#f7efff;
}

.player-artist{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#d7cae8;
}

.player-orb{
  width:162px;
  height:162px;
  position:relative;
  display:grid;
  place-items:center;
  touch-action:none;
}

.seek-ring{
  --progress:0;
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding:10px;
  background:
    radial-gradient(circle, rgba(255,255,255,.08) 60%, transparent 61%),
    conic-gradient(from -90deg, #f0d184 calc(var(--progress) * 1turn), rgba(255,255,255,.12) 0turn);
  box-shadow:
    0 0 18px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.seek-ring::before{
  content:"";
  position:absolute;
  inset:13px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%, rgba(31,20,43,.98), rgba(12,8,19,.96));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.moon-button{
  position:relative;
  z-index:1;
  width:118px;
  height:118px;
  border:none;
  border-radius:50%;
  padding:0;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .16s ease;
}

.moon-button:hover{
  transform:scale(1.02);
}

.moon-button:focus-visible,
.player-btn:focus-visible,
.ytLink:focus-visible{
  outline:2px solid rgba(240,209,132,.9);
  outline-offset:3px;
}

.moon-disc{
  width:100%;
  height:100%;
  border-radius:50%;
  display:block;
  background-image:
    var(--moon-image),
    radial-gradient(circle at 32% 28%, rgba(255,250,232,.92) 0 12%, rgba(232,215,171,.95) 13%, rgba(171,154,120,.95) 26%, rgba(81,73,86,.9) 48%, rgba(34,28,42,.96) 72%, rgba(17,11,25,1) 100%);
  background-size:cover, auto;
  background-position:center, center;
  box-shadow:
    inset -14px -12px 22px rgba(0,0,0,.38),
    inset 8px 6px 16px rgba(255,255,255,.08),
    0 10px 20px rgba(0,0,0,.24);
  will-change:transform;
}

.moon-button::before{
  content:"";
  position:absolute;
  width:82px;
  height:82px;
  top:18px;
  right:16px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.06);
}

.moon-symbol{
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  min-width:38px;
  min-height:38px;
  padding:0 8px;
  border-radius:999px;
  font-size:13px;
  letter-spacing:.14em;
  color:#fbf2dd;
}

.player-time{
  font-size:12px;
  letter-spacing:.08em;
  color:#eadcfb;
}

.player-controls{
  width:100%;
  display:flex;
  justify-content:center;
  gap:10px;
}

.player-btn{
  min-width:68px;
  padding:8px 0;
  border:1px solid rgba(219,197,255,.2);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(33,22,43,.92), rgba(16,11,24,.92));
  color:#f6ecff;
  font:inherit;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease;
}

.player-btn:hover{
  border-color:#f0d184;
}

.ytLink{
  display:block;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#f1d88f;
}

.moon-button.is-playing .moon-disc{
  animation-play-state:running;
}

@keyframes moon-spin{
  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce){
  .moon-disc{
    animation:none !important;
  }
}

/* ======================================
   MOBILE ORDER + CHROME POLISH
====================================== */

.title-bar,
.box-title-bar{
  position:relative;
  overflow:hidden;
  border-top-left-radius:7px;
  border-top-right-radius:7px;
}

.title-bar::after,
.box-title-bar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(to right, rgba(255,255,255,.08), rgba(0,0,0,.28), rgba(255,255,255,.06));
}

.right span{
  font-weight:700;
  line-height:1;
}

.right span:not(.min){
  position:relative;
  top:-1px;
}

.main-header .inner{
  padding:12px 14px 14px;
}

.banner{
  width:calc(100% + 28px);
  height:124px;
  margin:-12px -14px 10px;
  border-radius:0;
  background:url("/view.gif") center 56%/cover no-repeat;
}

.main-header .nav{
  padding:0 18px 6px;
}

@media (max-width:1000px){
  .nav button{
    transform:rotate(180deg);
  }

  .nav button:hover{
    transform:rotate(180deg) translateY(-4px);
  }

  .nav button.active{
    transform:rotate(180deg) translateY(-6px) rotate(-2deg);
  }

  .sidebar-group{
    grid-template-columns:minmax(0, 1fr);
    justify-items:center;
    gap:20px;
    padding:18px 14px 28px;
  }

  .sidebar-group > .sidebar-stack,
  .sidebar-group > .main-column{
    width:100%;
    max-width:700px;
  }

  .sidebar-group > .sidebar-stack:nth-child(1){
    order:1;
  }

  .sidebar-group > .sidebar-stack:nth-child(3){
    order:2;
  }

  .sidebar-group > .main-column{
    order:3;
  }

  .sidebar-group > .sidebar-stack{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:16px;
  }

  .sidebar-stack > .sidebar,
  .sidebar-stack > .sidebar-box,
  .sidebar-stack > .wide-sidebar{
    flex:0 0 220px;
    width:220px;
    max-width:220px;
    margin:0;
  }

  .main-column{
    width:100%;
    max-width:700px;
  }

  .main-header .inner{
    padding:10px 12px 14px;
  }

  .banner{
    width:calc(100% + 24px);
    height:108px;
    margin:-10px -12px 10px;
    background-position:center 54%;
  }

  .main-header .nav{
    padding:0 14px 6px;
  }

  .player{
    max-width:220px;
  }
}

/* ======================================
   ARCHIVE CATALOGUE
====================================== */

.archive-featured-feed,
.archive-post-list{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.archive-post-list[hidden],
.archive-catalogue-groups[hidden]{
  display:none !important;
}

.archive-catalogue{
  margin-top:2px;
}

.archive-catalogue-toggle{
  width:100%;
  padding:6px 0 10px;
  border:none;
  background:transparent;
  color:#ead9fb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  text-align:left;
  cursor:pointer;
}

.archive-catalogue-title{
  font-family:Georgia, "Times New Roman", serif;
  font-size:22px;
  color:#ead9fb;
}

.archive-catalogue-toggle-right{
  display:flex;
  align-items:center;
  gap:10px;
  color:#bda7d7;
}

.archive-catalogue-summary{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.archive-catalogue-chevron{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(85,58,114,.8);
  border-radius:999px;
  background:rgba(31,19,44,.85);
  font-size:18px;
  line-height:1;
}

.archive-catalogue-groups{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:4px;
}

.archive-catalogue-group{
  padding:12px;
  border:1px solid rgba(58,34,82,.75);
  border-radius:8px;
  background:rgba(16,9,24,.72);
}

.archive-catalogue-year{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  font-size:16px;
  font-weight:700;
  color:#f0e4ff;
}

.archive-catalogue-count{
  min-width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#352047;
  border:1px solid rgba(123,87,164,.5);
  color:#d8c6ee;
  font-size:12px;
}

.archive-catalogue-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:8px;
}

.archive-catalogue-link{
  width:100%;
  min-height:72px;
  padding:10px 12px;
  border:1px solid rgba(68,43,92,.85);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(43,26,60,.88), rgba(24,15,35,.94));
  color:#f2e7ff;
  text-align:left;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.archive-catalogue-link:hover{
  transform:translateY(-1px);
  border-color:#9e7ac8;
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}

.archive-catalogue-link-title,
.archive-catalogue-link-date{
  display:block;
  overflow:hidden;
}

.archive-catalogue-link-title{
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  color:#f0e6ff;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.archive-catalogue-link-date{
  margin-top:5px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#bea7d9;
  white-space:nowrap;
  text-overflow:ellipsis;
}

@media (max-width:1000px){
  .archive-catalogue-toggle{
    padding-bottom:8px;
  }

  .archive-catalogue-toggle-right{
    gap:8px;
  }

  .archive-catalogue-summary{
    display:none;
  }

  .archive-catalogue-list{
    grid-template-columns:repeat(auto-fit, minmax(145px, 1fr));
  }
}


/* ======================================
   FURSONA GALLERY
====================================== */

.fursona-intro{
  margin:-6px 0 2px;
  color:#d8c8eb;
  line-height:1.6;
}

.fursona-shell{
  display:grid;
  grid-template-columns:minmax(180px, 220px) minmax(0, 1fr);
  gap:18px;
  align-items:start;
}

.fursona-tab-rail{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.fursona-tab{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(77,50,104,.92);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(55,34,76,.96), rgba(27,17,38,.98));
  color:#efe5fc;
  text-align:left;
  cursor:pointer;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.fursona-tab:hover{
  transform:translateY(-1px);
  border-color:#9f7bca;
  box-shadow:0 10px 18px rgba(0,0,0,.22);
}

.fursona-tab.active{
  border-color:#d3b06f;
  box-shadow:0 0 0 1px rgba(211,176,111,.18), 0 12px 22px rgba(0,0,0,.24);
}

.fursona-tab-name,
.fursona-tab-subtitle{
  display:block;
}

.fursona-tab-name{
  font-family:Georgia, "Times New Roman", serif;
  font-size:18px;
  color:#f6eefe;
}

.fursona-tab-subtitle{
  margin-top:4px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#c7b4dd;
}

.fursona-stage{
  min-width:0;
}

.fursona-card{
  border:1px solid rgba(74,49,96,.9);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(43,26,60,.96), rgba(20,12,30,.98)),
    radial-gradient(circle at top right, rgba(201,131,97,.12), transparent 35%);
  box-shadow:0 18px 32px rgba(0,0,0,.28);
  overflow:hidden;
}

.fursona-card.accent-violet{
  --fursona-accent:#caa4ff;
  --fursona-accent-soft:rgba(202,164,255,.18);
}

.fursona-card.accent-gold{
  --fursona-accent:#d7b273;
  --fursona-accent-soft:rgba(215,178,115,.18);
}

.fursona-card.accent-ember{
  --fursona-accent:#d78661;
  --fursona-accent-soft:rgba(215,134,97,.18);
}

.fursona-card{
  --fursona-accent:#caa4ff;
  --fursona-accent-soft:rgba(202,164,255,.18);
}

.fursona-hero{
  display:grid;
  grid-template-columns:136px minmax(0, 1fr);
  gap:18px;
  padding:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.04));
  border-bottom:1px solid rgba(255,255,255,.04);
}

.fursona-portrait{
  width:136px;
  height:136px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(circle at 35% 30%, var(--fursona-accent-soft), rgba(20,12,30,.95) 68%);
  display:grid;
  place-items:center;
  box-shadow:inset 0 1px rgba(255,255,255,.06), 0 10px 18px rgba(0,0,0,.26);
}

.fursona-portrait.is-placeholder span{
  font-family:Georgia, "Times New Roman", serif;
  font-size:52px;
  color:var(--fursona-accent);
}

.fursona-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.fursona-copy{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.fursona-name{
  font-family:Georgia, "Times New Roman", serif;
  font-size:34px;
  line-height:1.05;
  color:#f7efff;
}

.fursona-subtitle{
  margin-top:6px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fursona-accent);
}

.fursona-summary{
  color:#dacbe9;
  line-height:1.65;
}

.fursona-tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.fursona-tag{
  padding:5px 10px;
  border:1px solid rgba(96,67,126,.85);
  border-radius:999px;
  background:rgba(24,14,35,.88);
  font-size:12px;
  color:#e9dcf7;
}

.fursona-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  padding:20px;
}

.fursona-detail-panel,
.fursona-gallery-panel,
.fursona-empty-state{
  border:1px solid rgba(77,50,104,.75);
  border-radius:12px;
  background:rgba(14,8,20,.6);
  box-shadow:inset 0 1px rgba(255,255,255,.03);
}

.fursona-detail-panel,
.fursona-gallery-panel{
  padding:16px;
}

.fursona-section-title,
.fursona-empty-title{
  font-family:Georgia, "Times New Roman", serif;
  font-size:22px;
  color:#f2e8ff;
  margin-bottom:12px;
}

.fursona-facts{
  display:grid;
  gap:10px;
}

.fursona-fact{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(33,20,46,.7);
  border:1px solid rgba(87,59,112,.55);
}

.fursona-fact-label{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#bca6d7;
}

.fursona-fact-value{
  color:#f1e7ff;
  text-align:right;
}

.fursona-note-stack p{
  margin:0;
  color:#dacbe9;
  line-height:1.65;
}

.fursona-note-stack p + p{
  margin-top:10px;
}

.fursona-muted,
.fursona-empty-gallery,
.fursona-empty-state p{
  color:#c7b4dd;
  line-height:1.6;
}

.fursona-gallery-panel{
  margin:0 20px 20px;
}

.fursona-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:14px;
}

.fursona-frame{
  margin:0;
  border:1px solid rgba(84,57,109,.8);
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(43,26,60,.95), rgba(19,12,29,.98));
  box-shadow:0 10px 18px rgba(0,0,0,.22);
}

.fursona-frame img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.fursona-frame figcaption{
  padding:10px 12px;
  font-size:13px;
  color:#d9cae9;
  line-height:1.5;
}

.fursona-empty-state{
  padding:20px;
}

@media (max-width:900px){
  .fursona-shell,
  .fursona-hero,
  .fursona-detail-grid{
    grid-template-columns:1fr;
  }

  .fursona-portrait{
    width:100%;
    max-width:180px;
    height:180px;
    margin:0 auto;
  }

  .fursona-gallery-panel{
    margin:0 0 20px;
  }
}