:root{
  --orange:#ff8700;
  --orange-light:#ff9d22;
  --nav:#06162f;
  --panel:#061830;
  --panel-deep:#031128;
  --blue:#064cad;
  --text:#f4f7ff;
  --muted:#c8d5ea;
  --border:rgba(255,135,0,.95);
}
*{box-sizing:border-box}
html{background:#061d54}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    linear-gradient(rgba(0,37,112,.32),rgba(0,20,65,.38)),
    url("../assets/enju-background.png?v=4") center/cover fixed no-repeat,
    #052b77;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}

.hero{
  width:100%;
  height:100%;
  overflow:visible;
  line-height:0;
  background:#073a96;
}
.hero img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}

.main-nav{
  background:linear-gradient(180deg,#071a39,#041128);
  border-bottom:1px solid #1674e7;
  box-shadow:0 5px 14px rgba(0,0,0,.34);
}
.nav-inner{
  width:min(1536px,100%);
  margin:auto;
  display:flex;
  align-items:stretch;
  min-height:48px;
}
.nav-item{
  min-width:165px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  color:#f4f7ff;
  font-size:1rem;
}
.nav-item:hover{background:#0b2b58}
.nav-item.active{
  color:#071326;
  background:linear-gradient(180deg,var(--orange-light),var(--orange));
  font-weight:800;
}

.site-grid{
  width:min(1495px,calc(100% - 44px));
  margin:20px auto 28px;
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:22px;
}
.module-panel{
  background:linear-gradient(180deg,rgba(5,20,47,.98),rgba(2,10,26,.98));
  border:1px solid rgba(25,89,180,.45);
  border-radius:14px;
  overflow:hidden;
  height:max-content;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.module-panel h2{
  margin:0;
  padding:15px 18px;
  font-size:1.15rem;
}
.module-button{
  width:100%;
  border:0;
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 18px;
  background:transparent;
  color:#f1f6ff;
  cursor:pointer;
  text-align:left;
}
.module-button:hover{background:#0a2b5e}
.module-button.active{
  background:linear-gradient(180deg,#ff9d29,#ff8500);
  color:#071326;
  font-weight:800;
}
.module-icon{width:22px;text-align:center}

.command-content{min-width:0}
.intro-panel{
  min-height:123px;
  background:
    linear-gradient(90deg,rgba(4,22,53,.96),rgba(4,31,78,.92)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 80px);
  border:1.5px solid var(--border);
  border-radius:15px;
  padding:17px 17px 14px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  box-shadow:0 13px 28px rgba(0,0,0,.18);
}
.intro-panel h1{
  color:var(--orange);
  font-size:2rem;
  line-height:1;
  margin:0 0 13px;
}
.intro-panel p{
  color:#e8efff;
  margin:6px 0;
  font-size:1rem;
}

.filters{
  margin:22px 0 12px;
  display:grid;
  grid-template-columns:minmax(280px,1fr) 270px 180px;
  gap:20px;
  align-items:center;
}
.search{position:relative}
.search span{
  position:absolute;
  left:17px;
  top:50%;
  transform:translateY(-50%);
  font-size:1.7rem;
}
.search input,
.filters select{
  width:100%;
  height:50px;
  color:#fff;
  background:#06152e;
  border:1px solid #607aa2;
  border-radius:10px;
  padding:0 15px;
  outline:none;
}
.search input{padding-left:51px}
.search input:focus,.filters select:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,135,0,.12);
}
.command-count{
  color:var(--orange);
  text-align:right;
  font-size:1.05rem;
}

.table-panel{
  border:1.5px solid var(--border);
  border-radius:13px;
  overflow:hidden;
  background:#061326;
}
.table-scroll{overflow-x:auto}
.command-table{
  width:100%;
  min-width:850px;
  table-layout:fixed;
  border-collapse:collapse;
}
.command-table th{
  color:#081427;
  background:linear-gradient(#ff9b21,#ff8100);
  padding:10px 15px;
  text-align:left;
  border-right:1px solid rgba(0,0,0,.24);
  font-weight:900;
}
.command-table th:nth-child(1){width:18%}
.command-table th:nth-child(2){width:15%}
.command-table th:nth-child(3){width:43%}
.command-table th:nth-child(4){width:24%}
.command-table td{
  padding:7px 15px;
  color:#f6f8ff;
  background:rgba(2,14,33,.94);
  border-top:1px solid rgba(255,125,0,.65);
  border-right:1px solid rgba(255,125,0,.58);
  vertical-align:top;
  overflow-wrap:anywhere;
}
.command-table tbody tr{cursor:pointer}
.command-table tbody tr:hover td{background:#0b2851}
.cmd-name,.cmd-alias,.cmd-usage{font-family:Consolas,monospace}
.cmd-name{font-weight:800}
.row-details{
  display:none;
  margin-top:7px;
  color:#9ec7ff;
  font-size:.83rem;
}
tr.expanded .row-details{display:block}
.empty-state{text-align:center;padding:40px;color:#bdcce2}

.pagination{
  display:flex;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
  margin-top:15px;
}
.page-button{
  min-width:38px;
  height:38px;
  border:1px solid #154b91;
  border-radius:6px;
  color:#fff;
  background:linear-gradient(#0a2e69,#061d44);
  cursor:pointer;
}
.page-button:hover{background:#0e408f}
.page-button.active{
  color:#071326;
  background:var(--orange);
  border-color:var(--orange);
  font-weight:900;
}
.page-button:disabled{opacity:.42;cursor:not-allowed}
.page-gap{padding:8px 5px}

.orange-button{background:var(--orange);color:#071326}
.secondary-button{background:#15345f;color:#fff}
.text-button{margin-top:10px;background:transparent;color:#9ec7ff;padding-left:0}

.footer{
  min-height:54px;
  padding:15px 24px;
  background:#031128;
  border-top:1px solid #1559ac;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#d8e3f5;
  font-size:.87rem;
}
.footer a:hover{color:var(--orange)}

/* Invite page */
.invite-layout{
  width:min(1180px,calc(100% - 38px));
  margin:35px auto 50px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:18px;
}
.invite-main{min-width:0}
.invite-intro{margin-bottom:18px}
.invite-box,.why-panel{
  background:linear-gradient(180deg,rgba(4,22,53,.98),rgba(2,11,28,.98));
  border:1.5px solid var(--orange);
  border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.3);
}
.invite-box{
  padding:30px;
  text-align:center;
}
.discord-mark{
  width:70px;height:70px;margin:0 auto 10px;
  display:grid;place-items:center;border-radius:50%;
  background:#0b3d8a;border:2px solid var(--orange);
  font-size:2rem;
}
.invite-box h2{font-size:1.75rem;margin:7px 0;color:#fff}
.invite-box>p{color:#d0ddf0}
.big-invite-button{
  display:inline-block;
  margin:15px auto 23px;
  padding:15px 30px;
  background:linear-gradient(#ffa32c,#ff8400);
  color:#071326;
  border-radius:7px;
  font-weight:900;
  font-size:1.05rem;
}
.big-invite-button:hover{filter:brightness(1.08)}
.oauth-table-wrap{overflow-x:auto}
.oauth-table{
  width:100%;
  min-width:550px;
  border-collapse:collapse;
}
.oauth-table th{
  background:linear-gradient(#ff9d22,#ff8500);
  color:#071326;
  padding:10px;
}
.oauth-table td{
  background:#06162f;
  border:1px solid rgba(255,135,0,.6);
  padding:12px;
  font-family:Consolas,monospace;
}
.small-note{font-size:.83rem!important;color:#9fb0c8!important}
.why-panel{
  padding:22px;
  height:max-content;
}
.why-panel h2{margin-top:0;color:var(--orange)}
.why-panel ul{
  padding:0;
  list-style:none;
  line-height:2;
  color:#e4ecf8;
}
.why-panel li::first-letter{color:var(--orange)}
.block-button{display:block;text-align:center;margin-top:15px}

@media(max-width:900px){
  .nav-inner{overflow-x:auto}
  .nav-item{min-width:130px}
  .site-grid{grid-template-columns:1fr}
  .module-panel{position:static}
  #moduleList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters{grid-template-columns:1fr 1fr}
  .command-count{grid-column:1/-1;text-align:left}
  .invite-layout{grid-template-columns:1fr}
}
@media(max-width:580px){
  .site-grid,.invite-layout{width:min(100% - 16px,1495px)}
  .nav-item{min-width:108px;padding:11px 12px}
  .nav-item span{font-size:.9rem}
  #moduleList{grid-template-columns:1fr}
  .intro-panel{display:block}
  .filters{grid-template-columns:1fr}
  .command-count{grid-column:auto}
  .footer{flex-direction:column;gap:7px;text-align:center}
}

/* Support page */
.support-layout{
  width:min(1180px,calc(100% - 38px));
  margin:35px auto 50px;
}
.support-intro{margin-bottom:18px}
.support-card{
  padding:32px;
  text-align:center;
  background:linear-gradient(180deg,rgba(4,22,53,.98),rgba(2,11,28,.98));
  border:1.5px solid var(--orange);
  border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.3);
}
.support-discord-mark{
  width:74px;height:74px;margin:0 auto 12px;
  display:grid;place-items:center;border-radius:50%;
  background:#0b3d8a;border:2px solid var(--orange);
  color:var(--orange);font-size:2rem;font-weight:900;
}
.support-card h2{margin:6px 0 8px;color:#fff;font-size:1.9rem}
.support-lead{margin:0 auto 26px;color:#d0ddf0;font-size:1.02rem}
.support-features{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;text-align:left;
}
.support-feature{
  min-height:135px;padding:20px;
  background:linear-gradient(180deg,rgba(10,42,91,.78),rgba(5,25,58,.88));
  border:1px solid rgba(255,136,0,.58);border-radius:10px;
}
.support-feature h3{margin:0 0 9px;color:var(--orange);font-size:1.08rem}
.support-feature p{margin:0;color:#d5e1f2;line-height:1.55}
.support-join{margin-top:28px}
@media(max-width:700px){
  .support-layout{width:min(100% - 16px,1180px);margin-top:20px}
  .support-card{padding:22px 16px}
  .support-features{grid-template-columns:1fr}
}

/* Full Enju banner override */
.hero{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  line-height:0;
}
.hero img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}


/* Enju 2026 wallpaper + banner override */
html { min-height:100%; background:#061a44; }
body {
  min-height:100vh !important;
  background-image:
    linear-gradient(rgba(0,15,55,.12),rgba(0,15,55,.12)),
    url("../assets/enju-background.png?v=4") !important;
  background-position:center top !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
.site-grid,.command-content { background:transparent !important; }
.module-panel { background:rgba(2,10,26,.78) !important; backdrop-filter:blur(4px); }
.intro-panel { background:rgba(4,22,53,.76) !important; backdrop-filter:blur(4px); }
.filters { background:rgba(2,14,33,.72) !important; }
.table-panel { background:rgba(2,11,28,.78) !important; backdrop-filter:blur(4px); }
.command-table tbody td { background:rgba(6,19,38,.74) !important; }
.footer { background:rgba(3,17,40,.82) !important; }

/* Taller banner. Full image remains visible; blue fills any extra vertical space. */
.hero {
  width:100% !important;
  min-height:240px !important;
  height:240px !important;
  max-height:none !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#073a96 !important;
}
.hero img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}
@media(max-width:900px){.hero{height:190px !important;min-height:190px !important}}
@media(max-width:580px){.hero{height:145px !important;min-height:145px !important}}


/* =========================================================
   ENJU FULL-WIDTH SITE CHROME
   Banner and footer must span 100% of the viewport.
   ========================================================= */

html,
body {
  width:100%;
  max-width:none !important;
  overflow-x:hidden;
}

.hero {
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  border-radius:0 !important;
}

.hero img {
  width:100% !important;
  max-width:none !important;
}

.main-nav {
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  border-radius:0 !important;
}

.footer {
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-top:28px !important;
  margin-bottom:0 !important;
  padding:22px 24px !important;
  border-radius:0 !important;
  text-align:center !important;
  background:rgba(3,17,40,.92) !important;
  border-top:1px solid rgba(255,139,11,.55);
}

.footer > * {
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:700px) {
  .hero,
  .main-nav,
  .footer {
    width:100vw !important;
  }
}

/* Commands sidebar heading */
.module-panel h2 {
  color: #ffffff !important;
}

/* Invite application details */
.invite-app-details {
  max-width: 900px;
  margin: 28px auto;
  padding: 24px;
  background: rgba(2, 11, 28, .82);
  border: 1px solid rgba(255, 139, 11, .75);
  border-radius: 8px;
}
.invite-app-details h2 { color:#fff; margin-top:0; }
.invite-details-table {
  width:100%;
  border-collapse:collapse;
}
.invite-details-table th,
.invite-details-table td {
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid rgba(140,196,255,.22);
}
.invite-details-table th { color:#ffad35; }
.invite-details-table td { color:#fff; }

/* Full-width Enju banner */
.hero {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.hero img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  object-fit: cover;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* ENJU_HOME_PAGE_V1 */
.home-layout{
  width:min(1180px,calc(100% - 38px));
  margin:35px auto 50px;
}
.home-intro{margin-bottom:18px}
.home-card{
  margin-bottom:18px;
  padding:32px;
  background:linear-gradient(180deg,rgba(4,22,53,.95),rgba(2,11,28,.96));
  border:1.5px solid var(--orange);
  border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.3);
  backdrop-filter:blur(5px);
}
.home-overview-card,
.home-final-card{text-align:center}
.home-mark{
  width:74px;height:74px;margin:0 auto 12px;
  display:grid;place-items:center;border-radius:50%;
  background:#0b3d8a;border:2px solid var(--orange);
  color:var(--orange);font-size:2rem;font-weight:900;
  box-shadow:0 0 28px rgba(255,135,0,.14);
}
.home-eyebrow{
  margin:0 0 7px!important;
  color:var(--orange)!important;
  font-size:.82rem!important;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.home-card h2{
  margin:6px 0 10px;
  color:#fff;
  font-size:1.9rem;
}
.home-lead{
  max-width:850px;
  margin:0 auto 20px;
  color:#d0ddf0;
  font-size:1.02rem;
  line-height:1.65;
}
.home-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:8px 0 26px;
}
.home-actions-left{justify-content:flex-start;margin-bottom:0}
.home-action-primary{margin:0}
.home-secondary-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 23px;
  color:#f4f7ff;
  background:linear-gradient(180deg,#0a2e69,#061d44);
  border:1px solid #1959a6;
  border-radius:7px;
  font-weight:900;
}
.home-secondary-button:hover{
  background:#0e408f;
  border-color:#2f7bd4;
}
.home-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:10px;
  text-align:left;
}
.home-feature{min-height:150px}
.home-reaction-card{
  background:
    radial-gradient(circle at 92% 8%,rgba(255,135,0,.14),transparent 25rem),
    linear-gradient(180deg,rgba(4,22,53,.96),rgba(2,11,28,.97));
}
.home-section-heading{max-width:900px}
.home-section-heading h2{
  color:var(--orange);
  font-size:2rem;
  margin:10px 0 12px;
}
.home-section-heading>p{
  margin:0;
  color:#e3ecf9;
  line-height:1.7;
  font-size:1rem;
}
.home-pill{
  display:inline-flex;
  padding:6px 10px;
  border:1px solid rgba(255,135,0,.72);
  border-radius:999px;
  color:#ffb557;
  background:rgba(255,135,0,.08);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.09em;
}
.home-reaction-flow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:25px 0;
}
.home-flow-step{
  min-height:175px;
  padding:20px;
  background:linear-gradient(180deg,rgba(10,42,91,.78),rgba(5,25,58,.88));
  border:1px solid rgba(255,136,0,.58);
  border-radius:10px;
}
.home-step-number{
  width:34px;height:34px;
  display:grid;place-items:center;
  margin-bottom:12px;
  border-radius:50%;
  color:#071326;
  background:linear-gradient(#ffa32c,#ff8400);
  font-weight:900;
}
.home-flow-step h3{margin:0 0 8px;color:var(--orange);font-size:1.08rem}
.home-flow-step p{margin:0;color:#d5e1f2;line-height:1.55}
.home-section-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-bottom:18px;
}
.home-section-grid .home-card{margin:0}
.home-small-card{min-height:260px}
.home-card-icon{
  width:54px;height:54px;
  display:grid;place-items:center;
  margin-bottom:14px;
  border-radius:50%;
  color:var(--orange);
  background:#0b3d8a;
  border:2px solid var(--orange);
  font-size:1.1rem;
  font-weight:900;
}
.home-small-card h2{font-size:1.45rem;color:var(--orange)}
.home-small-card>p{
  margin:0 0 20px;
  color:#d5e1f2;
  line-height:1.65;
}
.home-text-link{
  color:#9ec7ff;
  font-weight:800;
}
.home-text-link:hover{color:var(--orange)}
.home-final-card{margin-bottom:0;padding-top:38px;padding-bottom:38px}
.home-final-card .home-actions{margin-bottom:0}
@media(max-width:800px){
  .home-feature-grid,
  .home-section-grid{grid-template-columns:1fr}
  .home-reaction-flow{grid-template-columns:1fr}
  .home-small-card{min-height:0}
}
@media(max-width:700px){
  .home-layout{width:min(100% - 16px,1180px);margin-top:20px}
  .home-card{padding:22px 16px}
  .home-actions,
  .home-actions-left{justify-content:stretch}
  .home-actions>a{width:100%}
}

/* =========================================================
   ENJU_BANNER_FIT_V2 — 2026-09-13
   Full viewport width with the COMPLETE source image visible.
   No fixed hero height and no object-fit:cover cropping.
   ========================================================= */
.hero {
  width: 100vw !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
  line-height: 0 !important;
  background: #073a96 !important;
}

.hero > img,
.hero img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}