:root{
  --bg:#0e171e;
  --panel:#0f1620;
  --panel2:#0c121b;
  --border:#1e2a3a;
  --text:#d7deea;
  --muted:#97a6bd;
  --gold:#d6b35a;
  --gold2:#f2d27a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 5px;
  --activeBorder:#c0a74b;
  --activeFill:#3b2f14;

  /* FIX: your CSS uses var(--primary) but it was missing */
  --primary: var(--gold);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: #03080f;
  color:var(--text);
}

.page-login{
  background: linear-gradient(135deg, #03080f 0%, #0e171e 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-login .login-container{
  background: linear-gradient(180deg, rgba(15,22,32,.92), rgba(10,14,20,.92));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.page-login .login-header{
  text-align: center;
  margin-bottom: 2rem;
}

.page-login .login-header h1{
  color: var(--gold);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.page-login .login-header p{
  color: var(--muted);
  font-size: 0.9rem;
}

.page-login .form-group{
  margin-bottom: 1.5rem;
}

.page-login .form-group label{
  display: block;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.page-login .form-group input{
  width: 100%;
  padding: 0.75rem;
  background: rgba(11,15,20,.35);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 0.9rem;
  transition: border-color 0.16s ease;
}

.page-login .form-group input:focus{
  outline: none;
  border-color: var(--gold);
}

.page-login .login-btn{
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(180deg, rgba(214,179,90,.2), rgba(214,179,90,.1));
  border: 1px solid rgba(214,179,90,.6);
  border-radius: 5px;
  color: var(--gold2);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}

.page-login .login-btn:hover{
  background: linear-gradient(180deg, rgba(214,179,90,.3), rgba(214,179,90,.2));
  border-color: var(--gold2);
}

.page-login .error{
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #ff6b6b;
  padding: 0.75rem;
  border-radius: 5px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  text-align: center;
}

.page-login .back-link{
  text-align: center;
  margin-top: 1.5rem;
}

.page-login .back-link a{
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.16s ease;
}

.page-login .back-link a:hover{
  color: var(--gold2);
}

.shell{
  max-width:1200px;
  margin:0px auto;
  padding:0 24px;
}

/* =========================
   TOP BAR
========================= */

.topbar{
  position: sticky;
  top: 12px;
  z-index: 10;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items:center;
  background: var(--bg);
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 16px 18px;
  backdrop-filter: blur(10px);
  position: relative;
}

/* Add your banner image background to the topbar */
.topbar.topbar--hero{
  background: url("/images/rawguide.png") center right / cover no-repeat;
  overflow: hidden;
}

/* optional: readability gradient over the image */
.topbar.topbar--hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to right,
    rgba(0,0,0,0.60),
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.00)
  );
  pointer-events:none;
  z-index:0;
}

/* ensure topbar content is above overlays */
.topbar.topbar--hero > :not(.topbar-feathers){
  position: relative;
  z-index: 2;
}

/* Feather layer */
.topbar-feathers{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

.topbar-feathers span{
  position:absolute;
  top:-28px;
  width: calc(34px * var(--size, 1));
  height: calc(16px * var(--size, 1));
  opacity: var(--op, .22);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20.24%2012.24a6%206%200%200%200-8.49-8.49L5%2010.5V19h8.5z'%20fill='rgba(214,179,90,0.12)'%20stroke='rgba(242,210,122,0.70)'%20stroke-width='1.4'%20stroke-linejoin='round'/%3E%3Cpath%20d='M16%208L2%2022'%20stroke='rgba(214,179,90,0.55)'%20stroke-width='1.2'%20stroke-linecap='round'/%3E%3Cpath%20d='M17.5%2015.5L9%2024'%20stroke='rgba(214,179,90,0.28)'%20stroke-width='1.1'%20stroke-linecap='round'/%3E%3C/svg%3E");
  filter: blur(var(--blur, 0px));
  transform-origin: 40% 60%;
  animation: feather-fall var(--dur, 11s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.topbar-feathers span:nth-child(even){
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M19.5%2012.6a6.2%206.2%200%200%200-8.77-8.77L5%2010.5V19h8.5z'%20fill='rgba(214,179,90,0.08)'%20stroke='rgba(242,210,122,0.62)'%20stroke-width='1.3'%20stroke-linejoin='round'/%3E%3Cpath%20d='M15.6%208.4L2%2022'%20stroke='rgba(214,179,90,0.46)'%20stroke-width='1.15'%20stroke-linecap='round'/%3E%3Cpath%20d='M18%2012.8l-4.5%204.5'%20stroke='rgba(214,179,90,0.20)'%20stroke-width='1.0'%20stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Spread + varied speeds/sizes */
.topbar-feathers span:nth-child(1){ left: 5%;  --dur: 12.5s; --size: .85; --op: .18; --drift: 28px;  --delay: -2.2s; --blur: 0px; }
.topbar-feathers span:nth-child(2){ left: 10%; --dur: 10.0s; --size: .70; --op: .14; --drift: 36px;  --delay: -6.1s; --blur: .2px; }
.topbar-feathers span:nth-child(3){ left: 16%; --dur: 14.0s; --size: .95; --op: .22; --drift: 22px;  --delay: -3.4s; --blur: 0px; }
.topbar-feathers span:nth-child(4){ left: 22%; --dur: 11.2s; --size: .78; --op: .16; --drift: 40px;  --delay: -7.3s; --blur: .25px; }
.topbar-feathers span:nth-child(5){ left: 28%; --dur: 15.5s; --size: .65; --op: .13; --drift: 48px;  --delay: -1.7s; --blur: .35px; }
.topbar-feathers span:nth-child(6){ left: 34%; --dur: 12.0s; --size: .88; --op: .20; --drift: 30px;  --delay: -8.0s; --blur: 0px; }
.topbar-feathers span:nth-child(7){ left: 40%; --dur: 9.8s;  --size: .72; --op: .15; --drift: 34px;  --delay: -4.9s; --blur: .25px; }
.topbar-feathers span:nth-child(8){ left: 46%; --dur: 13.8s; --size: 1.05;--op: .24; --drift: 26px;  --delay: -9.2s; --blur: 0px; }
.topbar-feathers span:nth-child(9){ left: 52%; --dur: 11.4s; --size: .80; --op: .17; --drift: 42px;  --delay: -3.0s; --blur: .2px; }
.topbar-feathers span:nth-child(10){left: 58%; --dur: 16.0s; --size: .62; --op: .12; --drift: 52px;  --delay: -5.6s; --blur: .4px; }
.topbar-feathers span:nth-child(11){left: 64%; --dur: 12.8s; --size: .90; --op: .21; --drift: 28px;  --delay: -10.0s; --blur: 0px; }
.topbar-feathers span:nth-child(12){left: 69%; --dur: 10.8s; --size: .76; --op: .15; --drift: 38px;  --delay: -1.1s; --blur: .25px; }
.topbar-feathers span:nth-child(13){left: 74%; --dur: 14.6s; --size: .98; --op: .23; --drift: 24px;  --delay: -6.8s; --blur: 0px; }
.topbar-feathers span:nth-child(14){left: 79%; --dur: 12.2s; --size: .82; --op: .17; --drift: 44px;  --delay: -8.6s; --blur: .2px; }
.topbar-feathers span:nth-child(15){left: 84%; --dur: 15.2s; --size: .68; --op: .13; --drift: 50px;  --delay: -2.8s; --blur: .35px; }
.topbar-feathers span:nth-child(16){left: 89%; --dur: 11.0s; --size: .78; --op: .16; --drift: 36px;  --delay: -9.7s; --blur: .2px; }
.topbar-feathers span:nth-child(17){left: 93%; --dur: 13.4s; --size: .92; --op: .20; --drift: 30px;  --delay: -4.1s; --blur: 0px; }
.topbar-feathers span:nth-child(18){left: 97%; --dur: 10.4s; --size: .70; --op: .14; --drift: 40px;  --delay: -7.9s; --blur: .25px; }

@keyframes feather-fall{
  0%   { transform: translate3d(0,-24px,0) rotate(-10deg); }
  20%  { transform: translate3d(calc(var(--drift, 30px) * .35), 42px,0) rotate(110deg); }
  45%  { transform: translate3d(calc(var(--drift, 30px) * -.20), 102px,0) rotate(240deg); }
  70%  { transform: translate3d(calc(var(--drift, 30px) * .55), 168px,0) rotate(330deg); }
  100% { transform: translate3d(var(--drift, 30px), 236px,0) rotate(430deg); }
}

/* =========================
   HEADER CONTENT
========================= */

.brand{display:flex; gap:12px; align-items:center; min-width: 0;}
.logo{
  width:128px;
  height:128px;
  border-radius: 0;
  object-fit: contain;
  padding:0;
  background: transparent;
  border:0;
  box-shadow:none;
  flex: 0 0 auto;
  position: relative;
  left: 60px;
  top: 10px;
}
/* clickable logo wrapper */
.brand-logo{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  text-decoration:none;
}

/* your website glow + animation */
.game-logo{
  cursor: pointer;
  filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.6))
          drop-shadow(0 0 12px rgba(0, 150, 255, 0.4));
  animation: glowDayNight 10s infinite ease-in-out;
  transition: transform 0.3s ease;
}
.brand-logo:hover .game-logo{ transform: scale(1.1); }
.brand-logo:active .game-logo{ transform: scale(1.05); }

@keyframes glowDayNight {
  0% {
    filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.6))
            drop-shadow(0 0 12px rgba(0, 150, 255, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 255, 200, 0.7))
            drop-shadow(0 0 24px rgba(255, 255, 180, 0.6));
  }
  100% {
    filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.6))
            drop-shadow(0 0 12px rgba(0, 150, 255, 0.4));
  }
}

.rawmu-logo{filter: drop-shadow(0 0 6px rgba(120,180,255,.25));}
.brand h1{font-size: 22px; margin:0; letter-spacing:.3px; position: relative; left: 80px;}
.brand .crumb{font-size:16px; color:var(--muted); margin-top:1px;position:relative;left:80px;}

.top-center{display:flex; justify-content:center; min-width:0;}
.actions{display:flex; gap:10px; align-items:center; justify-content:flex-end; position:relative;}

/* Buttons */
.btn{
  appearance:none;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(11,15,20,.55), rgba(11,15,20,.28));
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  cursor:pointer;
  transition: .16s ease;
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.55);
  user-select:none;
}
.btn:hover{border-color: rgba(214,179,90,.6); color: var(--gold2);}
.btn:active{transform: translateY(1px);}

.btn.active,
.btn:focus-visible{
  border-color: var(--activeBorder);
  outline: none;
  background: linear-gradient(180deg, var(--activeFill), rgba(11,15,20,.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(192,167,75,.55);
}

/* Sidebar toggle (corner-docked) */
.sidebar-toggle{width:32px; height:32px; padding:0;}
.sidebar-toggle .arrow{display:inline-block; transition: transform .18s ease;}
body:not(.sidebar-collapsed) #sidebarToggleBtn .arrow{transform: rotate(180deg);}

.sidebar-toggle.corner{
  z-index: 2;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(11,15,20,.55), rgba(11,15,20,.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.55);
}
.sidebar-toggle.corner:hover{
  border-color: rgba(214,179,90,.6);
  color: var(--gold2);
}
.sidebar-toggle.corner:active{transform: translateY(1px);}
.sidebar-toggle.corner.active{
  border-color: var(--activeBorder);
  background: linear-gradient(180deg, var(--activeFill), rgba(11,15,20,.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(192,167,75,.55);
}

.arrow-v{display:inline-block; transition: transform .18s ease; font-size: 12px; line-height: 1;}
#expandAllBtn.active .arrow-v{transform: rotate(180deg);}

/* Search */
.search{display:none;}

.search-toggle{
  position: relative;
  display:flex;
  align-items:center;
  gap:8px;
}

.left-controls{
  position:absolute;
  left:0;
  bottom:3px;
  display:flex;
  align-items:center;
  gap:8px;
}

.search-expand{
  display:flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding: 0 10px;
  border-radius: var(--radius);
  background: rgba(11,15,20,.35);
  border:1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.55);
  width: 0;
  max-width: 320px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition: width .18s ease, opacity .14s ease, border-color .14s ease;
}

.search-toggle.open .search-expand{
  border-color: var(--activeBorder);
  background: linear-gradient(180deg, var(--activeFill), rgba(11,15,20,.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(192,167,75,.55);
  width: calc(320px - 32px - 8px);
  opacity: 1;
  pointer-events:auto;
}

.search-toggle.open [data-role="search-btn"]{display:none;}
.search-expand .hint{color:var(--muted); font-size:12px}
.search-expand input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size: 13px;
  height:32px;
}

/* Layout */
.grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.sidebar-slot{width:320px;}

.card{
  background: linear-gradient(180deg, rgba(15,22,32,.92), rgba(10,14,20,.92));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Sidebar */
.sidebar{
  position: sticky;
  top: 170px;
  height: calc(100vh - 190px);
  min-height: 520px;
  display:flex;
  flex-direction:column;
  background: linear-gradient(180deg, rgba(15,22,32,.92), rgba(10,14,20,.92));
  border: 1px solid var(--border);
}

body.sidebar-collapsed .grid{grid-template-columns: 1fr;}
body.sidebar-collapsed .sidebar-slot{display:none;}

.side-head{
  padding: 12px 12px 10px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom: 1px solid rgba(30,42,58,.95);
  position: relative;
}
.side-head::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: linear-gradient(90deg, rgba(214,179,90,.55), rgba(214,179,90,0));
  pointer-events:none;
}
.side-head .title{font-size:13px; color:var(--muted); letter-spacing:.4px; text-transform:uppercase;}

.tree-wrap{padding: 10px; overflow:auto;}
.node{margin: 2px 0;}

.row{
  position: relative;
  display:flex; align-items:center; gap:8px;
  padding: 9px 8px;
  border-radius: var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition: background-color .14s ease, border-color .14s ease;
  user-select:none;
}
.row:hover{background: rgba(11,15,20,.35); border-color: rgba(214,179,90,.25)}

.row.active{background: rgba(214,179,90,.10); border-color: var(--activeBorder);}
.row.active::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0; width:3px;
  background: var(--activeBorder);
  border-radius: var(--radius) 0 0 var(--radius);
}

/* Drag and Drop styles */
.row.draggable { cursor: grab; }
.row.draggable:active { cursor: grabbing; }
.row.draggable:hover { background: rgba(11,15,20,.45); }

.node.drag-over {
  background: rgba(214,179,90,.15);
  border: 1px solid var(--activeBorder);
  border-radius: var(--radius);
}

.row[draggable="true"]:hover { background: rgba(214,179,90,.05); }
.row[draggable="true"]:active { opacity: 0.5; }

.mini{
  width:18px; height:18px; border-radius: var(--radius);
  background: rgba(214,179,90,.14);
  border:1px solid rgba(214,179,90,.22);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--gold2);
  font-size: 12px;
  flex: 0 0 auto;
}

/* Tree vertical line */
.sub{margin-left: 22px; padding-left: 14px; position: relative; display:none;}
.sub::before{
  content:"";
  position:absolute;
  left:4px;
  top:0;
  bottom:0;
  width:2px;
  background: linear-gradient(180deg,
    rgba(214,179,90,.45),
    rgba(30,42,58,.95),
    rgba(0,0,0,.85)
  );
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.06),
    inset -1px 0 0 rgba(0,0,0,.6);
  pointer-events:none;
}
.sub.open{display:block;}

/* Content */
.content{height: calc(100vh - 190px); min-height: 520px; display:flex; flex-direction:column;}

.content-head{
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(30,42,58,.95);
  position: relative;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 12px;
}
.content-head::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: linear-gradient(90deg, rgba(214,179,90,.55), rgba(214,179,90,0));
  pointer-events:none;
}

.content-head h2{margin:0; font-size:24px; letter-spacing:.2px;color: #d4af37;}
.content-head p{margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.4}

.meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.pill{font-size:12px; color: var(--muted); border:1px solid rgba(30,42,58,.9); background: rgba(11,15,20,.25); padding: 6px 10px; border-radius: 999px;}

.content-body{padding: 14px; overflow:auto;}

.panel{
  margin-top: 12px;
  border: 1px solid rgba(30,42,58,.95);
  background: linear-gradient(180deg, rgba(11,15,20,.30), rgba(11,15,20,.18));
  border-radius: var(--radius);
  padding: 12px;
  position: relative;
}
.panel::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius: calc(var(--radius) - 1px);
  border: 1px solid rgba(255,255,255,.04);
  pointer-events:none;
}
.panel::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, rgba(214,179,90,.30), rgba(214,179,90,0));
  pointer-events:none;
}
.panel h3{margin:0 0 8px; font-size:14px; color: var(--gold2)}
.panel ul{margin:0; padding-left: 18px;}
.panel li{margin: 6px 0;}
.small{font-size:12px; color:var(--muted)}

/* Multiple panels layout */
.panel + .panel { margin-top: 16px; }
.content-body:has(.panel + .panel) .panel { border-left: 3px solid var(--primary); padding-left: 16px; }

/* Panel variations */
.panel.featured { background: linear-gradient(180deg, rgba(255,215,0,.05), rgba(255,215,0,.02)); border-color: var(--primary); }
.panel.info { background: linear-gradient(180deg, rgba(52,152,219,.05), rgba(52,152,219,.02)); border-color: #3498db; }
.panel.warning { background: linear-gradient(180deg, rgba(241,196,15,.05), rgba(241,196,15,.02)); border-color: #f1c40f; }
.panel.success { background: linear-gradient(180deg, rgba(46,204,113,.05), rgba(46,204,113,.02)); border-color: #2ecc71; }

a.name-link{color: var(--text); text-decoration:none; border-bottom:1px solid transparent; transition:.14s ease;}
a.name-link:hover{color: var(--gold2); border-bottom-color: rgba(214,179,90,.85);}

/* Admin-only visibility */
#adminTopActions, #adminContentActions{display:flex; gap:10px; align-items:center;}
.admin-only[hidden]{display:none !important;}

/* Icon upload styling */
.icon-input-group { display: flex; gap: 8px; }

.upload-icon-btn {
  padding: 6px 10px;
  background: var(--primary);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  transition: all .14s ease;
  white-space: nowrap;
}
.upload-icon-btn:hover { background: var(--gold2); transform: translateY(-1px); }

/* Enhanced Toolbar */
.enhanced-toolbar {
  background: rgba(11,15,20,.8);
  border:1px solid rgba(30,42,58,.5);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  max-height: 200px;
  overflow-y: auto;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(30,42,58,.3);
}
.toolbar-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.toolbar-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  min-width: 60px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.toolbar-btn {
  padding: 4px 8px;
  background: rgba(30,42,58,.8);
  border: 1px solid rgba(50,70,100,.5);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  transition: all .14s ease;
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toolbar-btn:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.toolbar-btn:active { transform: translateY(0); }

.color-picker {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(50,70,100,.5);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}
.color-picker:hover { border-color: var(--primary); }

.header-select, .template-select {
  padding: 4px 8px;
  background: rgba(30,42,58,.8);
  border: 1px solid rgba(50,70,100,.5);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  min-width: 80px;
}
.header-select:hover, .template-select:hover { border-color: var(--primary); }
.header-select option, .template-select option { background: var(--bg); color: var(--text); }

/* Content toolbar */
.content-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px;
  background: rgba(11,15,20,.5);
  border:1px solid rgba(30,42,58,.5);
  border-radius: var(--radius);
}
.content-mode { font-size: 12px; color: var(--muted); font-weight: 500; }

.add-panel-btn {
  padding: 4px 8px;
  background: var(--primary);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  transition: all .14s ease;
}
.add-panel-btn:hover { background: var(--gold2); transform: translateY(-1px); }

.mode-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.3;
}

/* Inline editor styles (kept for compatibility even if not used) */
#inlineEditor{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,22,32,.98), rgba(12,18,27,.98));
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  padding: 0;
  margin: 16px 0;
  display: none !important;
}
#inlineEditor.show{ display: block !important; }
.inline-editor-header{
  padding: 12px 12px 10px;
  border-bottom:1px solid rgba(30,42,58,.85);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.inline-editor-header h3{font-size:14px; margin:0;}
.inline-editor-body{padding: 12px; display:grid; gap: 10px;}
.editor-toolbar{
  display:flex;
  gap:4px;
  padding:8px;
  background: rgba(11,15,20,.5);
  border:1px solid rgba(30,42,58,.5);
  border-radius: var(--radius);
  margin-bottom:8px;
  flex-wrap:wrap;
}
#inlineContent{
  min-height: 400px;
  padding: 10px;
  border-radius: var(--radius);
  border:1px solid rgba(30,42,58,.9);
  background: rgba(11,15,20,.35);
  color: var(--text);
  outline:none;
  resize: vertical;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: 14px;
}

/* Dialog */
dialog{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,22,32,.98), rgba(12,18,27,.98));
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  padding: 0;
  width: min(900px, calc(100vw - 24px));
  z-index: 99998;
}
dialog::backdrop{background: rgba(0,0,0,.55);}
.dlg-head{padding: 12px 12px 10px; border-bottom:1px solid rgba(30,42,58,.85); display:flex; justify-content:space-between; align-items:center;}
.dlg-head strong{font-size:14px}
.dlg-body{padding: 12px; display:grid; gap: 10px;}
.field{display:grid; gap: 6px;}
.field label{font-size:12px; color: var(--muted)}
.field input, .field select{padding: 10px 10px; border-radius: var(--radius); border:1px solid rgba(30,42,58,.9); background: rgba(11,15,20,.35); color: var(--text); outline:none;}
.dlg-actions{padding: 12px; display:flex; justify-content:flex-end; gap: 8px; border-top:1px solid rgba(30,42,58,.85)}

#editHtml{min-height: 500px;}
#editPanelList{display:flex; flex-direction:column; gap:6px; margin-bottom:8px;}
#editPanelList > div{display:flex; gap:6px; align-items:center;}
#editPanelList .btn{font-size:12px; padding:6px 10px; white-space:nowrap;}
#editPanelList .btn.active{background: var(--primary); color: #fff; border-color: var(--primary);}
#editPanelList input{flex:1;}

/* Search highlighting */
.row.search-match{background: rgba(214,179,90,.15) !important; border-left: 3px solid var(--gold2) !important;}
mark{background: rgba(214,179,90,.3); color: var(--text); padding:1px 2px; border-radius:2px;}

/* TinyMCE dialog z-index fix */
.tox-dialog-wrap{z-index: 99999 !important;}
.tox-dialog{z-index: 99999 !important;}
.tox-pop-up{z-index: 100001 !important;}
.tox-tooltip{z-index: 100004 !important;}
.tox-textarea{z-index: 1 !important;}
.tox-toolbar{z-index: 1 !important;}
.tox-tinymce{z-index: 1 !important;}

/* Simple editor toolbar */
.simple-editor-toolbar{
  display:flex;
  gap:4px;
  padding:8px;
  background: rgba(11,15,20,.5);
  border:1px solid rgba(30,42,58,.5);
  border-radius: var(--radius);
  margin-bottom:8px;
  flex-wrap:wrap;
}

.simple-editor-toolbar button{
  padding:6px 10px;
  background: rgba(30,42,58,.5);
  border:1px solid rgba(30,42,58,.8);
  border-radius:4px;
  color: var(--text);
  cursor:pointer;
  font-size:12px;
  transition:all .14s ease;
}
.simple-editor-toolbar button:hover{
  background: rgba(30,42,58,.8);
  border-color: var(--primary);
}

/* Login footer styling */
.login-footer {
  background: rgba(11, 15, 20, 0.6);
  backdrop-filter: blur(5px);
  margin: 2px;
  padding: 1px 20px !important;
}

.login-footer .btn {
  background: linear-gradient(180deg, rgba(214, 179, 90, 0.2), rgba(214, 179, 90, 0.1));
  border-color: rgba(214, 179, 90, 0.6);
  color: var(--gold2);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(212, 179, 90, 0.2);
}

.login-footer .btn:hover {
  background: linear-gradient(180deg, rgba(214, 179, 90, 0.3), rgba(214, 179, 90, 0.2));
  border-color: rgba(214, 179, 90, 0.8);
  color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(212, 179, 90, 0.4);
}

@media (max-width: 768px) {
  .login-footer { padding: 1px 15px !important; }
  .login-footer .btn { padding: 6px 12px; font-size: 12px; }
}

@media (max-width: 480px) {
  .login-footer { padding: 1px 10px !important; }
  .login-footer .btn { padding: 5px 10px; font-size: 11px; }
}

/* Footer styling */
.footer {
  background: rgba(11, 15, 20, 0.8);
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  padding: 20px 0;
  margin-top: 2px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer-copyright {
  color: #d4af37;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.footer-tagline {
  color: #e0e0e0;
  font-size: 14px;
  opacity: 0.8;
  font-style: italic;
}
@media (max-width: 768px) {
  .footer { padding: 15px 0; margin-top: 20px; }
  .footer-copyright { font-size: 14px; }
  .footer-tagline { font-size: 12px; }
}

@media (max-width: 980px){
  .grid{grid-template-columns: 1fr;}
  .sidebar-slot{width:auto;}
  .sidebar, .content{height:auto; min-height: unset; position: static;}
  .search{max-width: none; width: 100%;}
}

@media (max-width: 768px){
  .shell{padding: 8px;}
  .topbar{padding: 12px;}
  .brand h1{font-size: 16px; left: 40px !important;}
  .sidebar{padding: 12px;}
  .content{padding: 16px;}
  .panel{padding: 16px;}
  .field input, .field select{padding: 12px;}
  .btn{padding: 12px 16px;}

  .logo{
    width: 64px !important;
    height: 64px !important;
    left: 20px !important;
    top: 5px !important;
  }
  .brand{ gap: 8px !important; }
  .brand .crumb{ left: 40px !important; font-size: 14px !important; }

  dialog{
    width: min(95vw, calc(100vw - 16px));
    margin: 8px;
  }
  .search-toggle.open .search-expand{ width: calc(100vw - 80px); }
  .node .row{padding: 10px 8px;}
  .mini{font-size: 14px;}
  .tox-tinymce{border-radius: var(--radius);}
}

@media (max-width: 480px){
  .shell{padding: 4px;}
  .topbar{padding: 8px;}
  .brand h1{font-size: 12px; left: 30px !important;}
  .sidebar{padding: 8px;}
  .content{padding: 12px;}
  .panel{padding: 12px;}

  .logo{
    width: 48px !important;
    height: 48px !important;
    left: 10px !important;
    top: 2px !important;
  }
  .brand{ gap: 6px !important; }
  .brand .crumb{ left: 30px !important; font-size: 12px !important; }

  dialog{
    width: calc(100vw - 8px);
    margin: 4px;
    height: auto;
  }
  .dlg-body{padding: 8px;}
  .dlg-actions{padding: 8px; flex-direction: column;}
  .dlg-actions .btn{width: 100%; margin-bottom: 6px;}
  .dlg-actions .btn:last-child{margin-bottom: 0;}

  .node .row{padding: 8px 4px;}
  .btn{padding: 10px 12px; font-size: 14px;}
  .search-toggle.open .search-expand{ width: calc(100vw - 60px); }
}

/* =========================
   Tabs / Breadcrumbs / TOC / Toasts
========================= */

.crumbs-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  margin-top: 8px;
  flex-wrap:nowrap;
}

.breadcrumbs{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  min-width:0;
}

.breadcrumb{
  appearance:none;
  border:0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  border-radius: 0;
  cursor:pointer;
  font-size: 12px;
  transition: .14s ease;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumb:hover{
  color: var(--gold2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb-sep{ color: var(--muted); font-size: 12px; opacity:.8; }

.head-actions{ display:flex; gap:10px; align-items:center; justify-content:flex-end; }

.btn.btn-icon{
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
}

.btn.btn-icon .icon{ display:block; pointer-events:none; }

.search-count{ color: var(--muted); font-size:12px; font-weight:600; margin-left:6px; }

.search-clear{
  appearance:none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border:1px solid rgba(30,42,58,.9);
  background: rgba(11,15,20,.25);
  color: var(--muted);
  cursor:pointer;
  line-height: 1;
  font-size: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.55;
  transition: .14s ease;
}
.search-clear:hover{ opacity:1; border-color: rgba(214,179,90,.55); color: var(--gold2); }

.toc-panel h3{ margin:0 0 10px; }
.toc-list{ display:grid; gap:6px; }
.toc-link{
  appearance:none;
  border:1px solid rgba(30,42,58,.9);
  background: rgba(11,15,20,.25);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor:pointer;
  text-align:left;
  transition: .14s ease;
}
.toc-link:hover{ border-color: rgba(214,179,90,.55); color: var(--gold2); }
.toc-h3{ padding-left: 16px; opacity: .95; }

.toast-stack{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200000;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.toast{
  background: linear-gradient(135deg, rgba(0,0,0,.92), rgba(20,20,20,.92));
  border:1px solid rgba(30,42,58,.9);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transform: translateY(8px);
  opacity: 0;
  transition: .18s ease;
  max-width: min(420px, calc(100vw - 32px));
}
.toast.show{ transform: translateY(0); opacity: 1; }
.toast--success{ border-color: rgba(68,255,136,.35); }
.toast--error{ border-color: rgba(255,68,68,.35); }
.toast--warning{ border-color: rgba(242,210,122,.35); }

.fab-menu{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 200000;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border:1px solid rgba(214,179,90,.55);
  background: linear-gradient(180deg, rgba(214,179,90,.22), rgba(214,179,90,.10));
  color: var(--gold2);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  cursor:pointer;
  display:none;
}
.fab-menu:hover{ border-color: rgba(242,210,122,.85); }

@media (max-width: 980px){
  .fab-menu{ display:inline-flex; align-items:center; justify-content:center; }
}

/* =========================
   Custom HTML Editor (HTML/CSS/Preview) — OLD STYLE
========================= */
.ce-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
.ce-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.ce-box{
  position:relative;
  width:min(1200px, calc(100vw - 24px));
  height:min(760px, calc(100vh - 24px));
  background: linear-gradient(180deg, rgba(15,22,32,.98), rgba(12,18,27,.98));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.ce-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(30,42,58,.95);
}

.ce-meta{
  display:grid;
  grid-template-columns: 1fr 1fr 260px;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(30,42,58,.95);
}
@media (max-width: 900px){
  .ce-meta{ grid-template-columns: 1fr; }
}

.ce-tabs{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-bottom:1px solid rgba(30,42,58,.95);
}

.ce-tab{
  appearance:none;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(11,15,20,.55), rgba(11,15,20,.28));
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  cursor:pointer;
  transition:.16s ease;
}
.ce-tab:hover{ border-color: rgba(214,179,90,.6); color: var(--gold2); }
.ce-tab.active{
  border-color: var(--activeBorder);
  background: linear-gradient(180deg, var(--activeFill), rgba(11,15,20,.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(192,167,75,.55);
  color: var(--gold2);
}

.ce-actions{ margin-left:auto; display:flex; gap:10px; }
.ce-body{ flex:1; min-height:0; }
.ce-pane{ display:none; height:100%; }
.ce-pane.active{ display:block; height:100%; }

#ceHtml, #ceCss{
  width:100%;
  height:100%;
  resize:none;
  padding:12px;
  border:0;
  outline:0;
  background: rgba(11,15,20,.35);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:13px;
  line-height:1.45;
}

.ce-preview-hint{
  padding:10px 12px;
  border-bottom:1px solid rgba(30,42,58,.95);
  color: var(--muted);
  font-size:12px;
}

.ce-preview-iframe{
  width:100%;
  height:calc(100% - 43px);
  border:0;
  background:#0b0f16;
}
/* --- Guide tree reorder controls --- */
.node .row{
  position: relative;
}

.node.is-hidden .row{
  opacity: .55;
}

.node.is-hidden .row::after{
  content: 'hidden';
  margin-left: 8px;
  font-size: 11px;
  color: var(--muted);
}

.node-tools{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-left: 10px;
  flex: 0 0 auto;
}

/* Uses your existing .btn look; keeps it compact */
/* Space between the two move buttons */
.order-actions{
  display: inline-flex;
  gap: 6px;              /* distance between ▲ and ▼ */
  align-items: center;
}

/* Smaller ▲ ▼ buttons */
.btn.btn-mini.move-btn{
  padding: 2px 6px;      /* smaller button */
  font-size: 11px;       /* smaller arrow */
  min-width: 22px;
  min-height: 20px;
  line-height: 1;
  border-radius: 5px;
}

.btn.btn-mini.move-btn:disabled{
  opacity: 0.35;
  cursor: not-allowed;
}

/* Make sure the tools stay on the right */
.node .row{
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-tabs] .stage-content { display: none; }
[data-tabs] .stage-content.active { display: block !important; }