body {
    background-color:#000000; 
    background-image: url(../img/sterne_bg2.jpg);
    background-repeat: repeat;
    text-align: center; 
    font-family:Arial, Helvetica, sans-serif; 
}

a {
   color:#666666;
   text-decoration: none;
}
a:hover {
    color:#ffffff;
}

#main {
    margin:0 auto;
    position: relative;
    width: 886px;
    height: 580px;
    background-image: url(../img/startseite_bg.jpg);
    background-repeat: none;
   
}

#mainmenu {
    position: absolute;
    left: 270px;
    top: 366px;
    font-size: 12px;
    font-weight: bold; 
    color:#b1daf2; 
    text-align: left;
    width: 127px;
}



#login {
    position: absolute;
    left: 400px;
    top: 457px;
    width: 450px;
    height: 125px;
    background-image: url(../img/part_login2.jpg);
    z-index:10;
}

.rightmenu_big {
    position: absolute;
    left: 400px;
    top: 70px;
    width: 450px;
    height: 384px;
    background-image: url(../img/part_big.jpg);
    z-index:1;
}

.rightmenu_register {
    position: absolute;
    left: 400px;
    top: 70px;
    width: 450px;
    height: 384px;
    background-image: url(../img/part_register2.jpg);
}

.rightmenu {
    position: absolute;
    left: 400px;
    top: 250px;
    width: 450px;
    height: 205px;
    background-image: url(../img/part_register.jpg);
    z-index:1;
}

#link {
    cursor: pointer;
}

#title {
    position: absolute;
    left: 25px;
    top: 12px;
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 16px;
    font-weight: bold; 
    color: #0a1c25; 
    text-align: left;
}

/*#text1 {
    position: absolute;
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 12px;
    
    color:#b1daf2; 
    text-align: left;
    width: 400px;

}*/

#content {
    position: absolute;
    left: 25px;
    top: 50px;
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 12px;
    
    color:#b1daf2; 
    text-align: left;
    width: 400px;
}

#contentscroll {
     overflow: auto;
     height: 320px;
     width: 405px;
    
     padding-right: 10px;
     
}

#register {
    position: absolute;
    left: 0px;
    top: 60px;
    width: 400px;
    height:26px;
    padding-top:10px; 
}

#register:hover {
    color:#ffffff;
}

#text2 {
    position: absolute;
    left: 0px;
    top: 110px;
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 12px;
    color:#b1daf2; 
    text-align: left;
    width: 400px;

}

#login_input {
    position: absolute;
    left: 11px;
    top: 23px;
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 10px;
    color:#b1daf2; 
    text-align: left;
    width: 440px;
}

#login_text_1 {
    position: absolute;
    top: 11px;
    left: 0px;
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 9px;
    color:#666666; 
    text-align: left;
    width: 440px;
}

#login_text_2 {
    position: absolute;
    top: 30px;
    left: 0px;
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 9px;
    color:#666666; 
    text-align: left;
    width: 440px;
}


#downmenu {
    position: absolute;
    top: 110px;
    left: 270px;
    font-size: 10px;
    color:#666666; 
    text-align: right;
    width: 169px;
}

#copyright {
    position: absolute;
    top: 110px;
    left: -100px;
    font-size: 10px;
    color:#666666; 
    text-align: left;
    width: 370px;
}

.image {
    padding-bottom: 10px;
}

.eingabe{ 
    border:1px solid #000000;
    background:#ffffff url(../img/eingabe_back.png) repeat-x;
    color: #000000;
    font-size:10px;
  
}
.menupoint {
    /*width:10px;*/
   /* height:4px; */
    padding-top:2px;
    padding-bottom:1px;
    padding-left:10px;
    background-image: url(../img/point.png);
    background-repeat: no-repeat;
    background-position: left center;
}

.link {
    cursor: pointer;
}
.link:hover {
    color:#ffffff;
}

#mainmenu a {
   padding-left:10px;
   padding-top:2px;
   padding-bottom:1px;
   color:#b1daf2; 
   text-decoration: none;
   display: block;
   
}

#mainmenu span {
    display: block;
}

#login_input a {
   color:#cccccc; 
   text-decoration: none;
}
#login_input a:hover {
    color:#ffffff;
}


#mainmenu a:hover {
    color:#ffffff;
}

.products {
    position:relative;
    width:886px;
    top:30px;
    height:30px;
    font-family:Arial, Helvetica, sans-serif; 
    margin:0 auto;
    font-size: 10px;
    color:#b5cfcd; 
}

img {
    border: 1px solid #516274;
}


img:hover {
   /* border: 1px solid #ffffff;*/
}

a img:hover {
    border: 1px solid #ffffff;
}

.products {
   /* display:none;*/
}

.products img {
    color:#516274;
    border-width: 1px;
    height: 12px;
    width: 18px;
}


.products a {
   color:#b5cfcd;
   text-decoration: none;
}
.products a:hover {
    color:#ffffff;
}

#headerselect {
    border:1px double #000000;
    background:#595f71;
    color: #dddddd;
    font-size:10px;
}

#register_container {
    position: absolute;
    top: 80px;
    left: 10px;
    width:380px;
    height:300px;
}

#infotext {
    position: absolute;
    top: 210px;
    width:400px;
}

#statustext {
    position: absolute;
    top: 260px;
    width:400px;
}

#register_submit {
    position: absolute;
    top: 286px;
    left:75px;
    width:250px;
    padding-top: 4px;
    height:20px;
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 13px;
    text-align: center;
    font-weight: bold; 
    color:#497ec7; 
    cursor: pointer;
}

#register_submit:hover {
    color:#ffffff;
}


table { 
    text-align: right;
    color:#cccccc;
    font-size: 10px;
}

td .eingabe {
    width: 120px;
    text-align:left;
}

.bigbutton {
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 16px;
    text-align: center;
    font-weight: bold; 
    color:#497ec7; 
    cursor: pointer;
}

.bigbutton:hover {
    color:#ffffff;
}

.warning {
    color:#ff7876;
}

.fine {
    color:#00ff00;
}

.register_agb {
    color:#cccccc;
}

.register_agb:hover {
    color:#ffffff;
}

.headline {
  text-align:center;
  font-weight:bold;
  font-size:14px;
}

#gimmik_1 {
    width:100px;
    height:50px;
    top:100px;
    left:100px;
}

#gimmik_2 {
    width:50px;
    height:50px;
    top:200px;
    left:100px;
}

.iframe {
    border:none;
    
    width:100%;
    height:27px;
}

.loginButton {
    padding-top:2px;
    padding-left:5px;
}


.loginButton:hover {
    padding-top:2px;
    padding-left:5px;
}

.bildUeberschrift {
     font-family:Arial, Helvetica, sans-serif; 
     font-size: 10px;
     color:#b1daf2; 
}

#unis_content {
    padding-left:70px;
    padding-top:10px;
}

#unis_content a {
    display: block;
    color:#878787;
}

#unis_content a:hover {
    color:#ffffff;
}

#unis_title2 {
    padding-top:25px;
    padding-bottom:3px;
    width:380px;
    font-size:14px;
    font-weight:bold;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#2a2f33; 
}

#closed_uni {
    color:#535353;
}


#uni_infos_link {
    text-align:left;
    width:200px;
    padding-top:3px;
}

#uni_infos_link a {
    color:#878787;
}

#uni_infos_link a:hover {
    color:#ffffff;
}

#uni_label {
    vertical-align:top;
    padding-top:3px;
}

.table_lable {

}

.table_input {
    text-align:left;
    padding-left:3px;
}

#table_agb {
    text-align:left;
}

#agb_zeile {

}

/* =========================================================================
   MERIDIAN THEME — The Fiddy Space (aligned to TGC / fiddy.org)
   tokens: bg #04030a · cyan #21f7d8 · violet #7c5cff · txt #e9e7f5
   ========================================================================= */
:root{
  --bg:#04030a; --bg-2:#080614;
  --glass:rgba(18,14,38,.84); --glass-2:rgba(26,20,52,.90);
  --txt:#ece9fb; --txt-dim:#a89fce; --txt-faint:#6c6890;
  --cyan:#21f7d8; --violet:#7c5cff; --violet-2:#b48cff; --magenta:#ff3df0; --gold:#e8c47a;
  --line:rgba(124,92,255,.50); --line-cyan:rgba(33,247,216,.28);
  --radius:16px; --grad:linear-gradient(120deg,var(--violet),var(--cyan));
}
body{
  background:
    linear-gradient(rgba(4,3,10,.62), rgba(4,3,10,.82)),
    url(../img/meridian_bg.jpg) center center / cover fixed no-repeat,
    var(--bg) !important;
  color:var(--txt) !important;
  font-family:'Inter',system-ui,Arial,sans-serif !important;
}
a{ color:var(--violet-2) !important; text-decoration:none; }
a:hover{ color:var(--cyan) !important; text-shadow:0 0 8px var(--cyan); }

/* glass panels replace the old part_*.jpg backgrounds */
.rightmenu_big, .rightmenu, .rightmenu_register, #login{
  background-image:none !important;
  background:var(--glass) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:0 0 0 1px rgba(33,247,216,.06), 0 18px 50px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
}
#title, .storyParagraphHead, .headline{
  color:var(--violet-2) !important;
  font-family:'Orbitron',sans-serif !important;
  letter-spacing:.06em; text-transform:uppercase;
  text-shadow:0 0 14px rgba(124,92,255,.55);
}
#content, #text1, #text2, #login_input, .bildUeberschrift{
  color:var(--txt) !important; font-family:'Inter',sans-serif !important;
}
#mainmenu{ font-family:'Orbitron',sans-serif !important; letter-spacing:.04em; }
#mainmenu a, #mainmenu a:link{ color:var(--txt-dim) !important; }
#mainmenu a:hover{ color:var(--cyan) !important; text-shadow:0 0 8px var(--cyan); }

/* inputs */
.eingabe, #headerselect{
  background:rgba(8,6,20,.85) !important; background-image:none !important;
  border:1px solid var(--line) !important; color:var(--txt) !important;
  border-radius:8px !important; padding:3px 6px !important;
}

/* buttons — signature violet→cyan gradient */
.bigbutton, #register_submit, .button, input.button{
  font-family:'Orbitron',sans-serif !important;
  color:#04030a !important; background:var(--grad) !important;
  border:none !important; border-radius:12px !important; padding:8px 16px !important;
  box-shadow:0 6px 20px rgba(124,92,255,.35);
  text-transform:uppercase; letter-spacing:.04em; cursor:pointer;
}
.bigbutton:hover, #register_submit:hover, .button:hover{ color:#04030a !important; filter:brightness(1.12); }

.joinLink{
  display:inline-block; margin-top:12px;
  font-family:'Orbitron',sans-serif !important; color:var(--cyan) !important;
}
.warning{ color:var(--magenta) !important; }
.fine{ color:var(--cyan) !important; }
#copyright, #downmenu, #login_text_1, #login_text_2{ color:var(--txt-faint) !important; }
.products, .products a{ color:var(--txt-dim) !important; }
img{ border:none !important; }

/* ---- MERIDIAN login card ---- */
#login{
  position:absolute !important; left:398px !important; top:452px !important;
  width:452px !important; height:auto !important;
  padding:18px 20px 14px !important; box-sizing:border-box !important;
  background:var(--glass-2) !important; z-index:10;
}
#login_input{ position:static !important; left:auto !important; top:auto !important; width:auto !important; }
#login .login-title{
  font-family:'Orbitron',sans-serif !important; color:var(--cyan) !important;
  text-transform:uppercase; letter-spacing:.10em; font-size:13px; font-weight:700;
  margin-bottom:14px; text-shadow:0 0 12px rgba(33,247,216,.45);
}
#login .login-field{ margin-bottom:11px; }
#login label{
  display:block; font-size:10px; color:var(--txt-dim) !important;
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:5px; font-family:'Inter',sans-serif;
}
#login .eingabe{
  width:100% !important; box-sizing:border-box !important;
  padding:9px 11px !important; font-size:12px !important; border-radius:9px !important;
}
#login .login-cols{ display:flex; gap:12px; }
#login .login-cols .login-field{ flex:1; }
#login .login-btn{
  width:100% !important; margin-top:6px !important; padding:11px !important;
  font-size:13px !important; letter-spacing:.10em !important;
}
#login .login-links{ margin-top:11px; text-align:right; font-size:11px; }
#login #login_footer{ margin-top:14px; padding-top:11px; border-top:1px solid var(--line); text-align:center; }
#login #copyright, #login #downmenu{
  position:static !important; left:auto !important; top:auto !important; width:auto !important;
  font-size:10px !important; color:var(--txt-faint) !important; text-align:center !important; margin:0;
}
#login #downmenu{ margin-top:4px; }
#login #downmenu a{ margin:0 6px; color:var(--txt-dim) !important; }
#login #downmenu a:hover{ color:var(--cyan) !important; }

/* =========================================================================
   MERIDIAN LAYOUT — reflow the rigid 886px absolute design into a centered column
   ========================================================================= */
#main{
  position:relative !important;
  width:auto !important; max-width:1060px !important; height:auto !important; min-height:100vh;
  margin:0 auto !important; padding:26px 24px 60px !important; box-sizing:border-box !important;
  background:none !important;                 /* drop the old hero image */
  display:flex !important; flex-direction:column; align-items:center; gap:22px;
}
/* logo banner at top (real element from products.php) */
#tfg_logo{ order:0; width:100%; text-align:center; margin:4px 0 2px; }
#tfg_logo img{
  width:min(600px,84%); height:auto; border:none !important;
  filter:drop-shadow(0 0 22px rgba(124,92,255,.45));
}
/* language bar -> top-right */
.products{
  position:absolute !important; top:8px !important; right:4px !important;
  width:auto !important; left:auto !important; height:auto !important; top:8px; margin:0 !important;
  font-size:11px; z-index:30;
}
/* horizontal nav */
#mainmenu{
  position:static !important; left:auto !important; top:auto !important; width:auto !important;
  order:1; display:flex !important; gap:8px; flex-wrap:wrap; justify-content:center;
}
#mainmenu a{
  display:inline-block !important; padding:7px 16px !important;
  border:1px solid var(--line) !important; border-radius:999px !important;
  background:rgba(18,14,38,.5); color:var(--txt-dim) !important; font-size:12px;
}
#mainmenu a:hover{ color:var(--cyan) !important; border-color:var(--line-cyan) !important; background:rgba(33,247,216,.08); }
#mainmenu span{ display:inline-block !important; }
/* active item (rendered as plain text/menupoint) -> highlighted pill */
#mainmenu .menupoint{
  background-image:none !important; display:inline-block !important;
  padding:7px 16px !important; border-radius:999px !important;
  border:1px solid var(--line-cyan) !important; background:rgba(33,247,216,.10) !important;
  color:var(--cyan) !important; font-size:12px;
}

/* content panels -> centered glass cards */
.rightmenu, .rightmenu_big, .rightmenu_register{
  position:static !important; left:auto !important; top:auto !important;
  width:100% !important; max-width:640px !important; height:auto !important;
  margin:0 auto !important; padding:24px 28px !important; box-sizing:border-box !important;
  order:2;
}
.rightmenu_register{ max-width:680px !important; }
/* inner absolute bits -> flow */
#title{ position:static !important; left:auto !important; top:auto !important; margin:0 0 14px !important; font-size:19px !important; }
#content{ position:static !important; left:auto !important; top:auto !important; width:auto !important; font-size:13px !important; line-height:1.5; }
#contentscroll{ position:static !important; height:auto !important; max-height:46vh; width:auto !important; overflow:auto !important; padding-right:8px; }
#text1{ position:static !important; left:auto !important; top:auto !important; width:auto !important; margin:0 0 16px !important; }
#text2{ position:static !important; left:auto !important; top:auto !important; width:auto !important; margin:16px 0 0 !important; }
#register{ position:static !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important; padding:11px 26px !important; margin:6px 0 4px !important; display:inline-block; }
/* register page inner blocks -> flow */
#register_container,#infotext,#statustext,#register_submit{ position:static !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important; margin:8px 0 !important; }

/* login card -> centered in the column */
#login{
  position:static !important; left:auto !important; top:auto !important;
  order:3; width:100% !important; max-width:460px !important; margin:0 auto !important;
}

/* ---- MERIDIAN register form ---- */
#register_container{ width:100% !important; }
#register_container form{ width:100%; }
#register_container table{ width:100% !important; text-align:left !important; border-collapse:separate; border-spacing:0; }
#register_container td{ padding:6px 0 !important; vertical-align:middle; }
.table_lable, #uni_label{
  text-align:left !important; white-space:nowrap; padding-right:14px !important;
  color:var(--txt-dim) !important; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  font-family:'Inter',sans-serif; width:1%;
}
.table_input{ text-align:left !important; width:100%; }
#register_container .eingabe,
#register_container select.eingabe{
  width:100% !important; box-sizing:border-box !important;
  padding:9px 11px !important; font-size:12px !important; border-radius:9px !important;
}
#uni_infos_link{ width:auto !important; padding-top:6px !important; }
#uni_infos_link a{ font-size:11px; color:var(--violet-2) !important; }
#table_agb{ font-size:11px; color:var(--txt-dim) !important; padding-top:8px !important; }
.register_agb{ color:var(--cyan) !important; }
#register_submit{
  position:static !important; left:auto !important; top:auto !important;
  width:100% !important; height:auto !important; margin:16px 0 0 !important;
  padding:12px !important; box-sizing:border-box;
  font-family:'Orbitron',sans-serif !important; color:#04030a !important;
  background:var(--grad) !important; border-radius:12px !important;
  text-transform:uppercase; letter-spacing:.08em; font-size:13px; text-align:center; cursor:pointer;
  box-shadow:0 6px 20px rgba(124,92,255,.35);
}
#register_submit:hover{ color:#04030a !important; filter:brightness(1.12); }
#infotext, #statustext{ position:static !important; width:auto !important; left:auto !important; top:auto !important; font-size:11px; color:var(--txt-faint) !important; margin-top:8px; }
#text1{ font-size:13px; line-height:1.5; }

/* ---- Sign in with The Gamers Center (primary SSO CTA) ---- */
.tgc-btn{
  display:block; text-align:center; text-decoration:none !important;
  font-family:'Orbitron',sans-serif; font-size:13px; letter-spacing:.03em;
  color:#04030a !important; background:var(--grad);
  padding:12px 14px; border-radius:12px; margin:2px 0 14px;
  box-shadow:0 6px 22px rgba(124,92,255,.40);
}
.tgc-btn:hover{ color:#04030a !important; filter:brightness(1.12); text-shadow:none !important; }
.login-or{ position:relative; text-align:center; margin:0 0 14px; color:var(--txt-faint); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.login-or span{ background:var(--glass-2); padding:0 10px; position:relative; z-index:1; }
.login-or::before{ content:''; position:absolute; left:6%; right:6%; top:50%; height:1px; background:var(--line); }

/* ---- SSO-only entry card ---- */
#login .login-sub{ color:var(--txt-dim) !important; font-size:12px; line-height:1.5; margin:2px 0 16px; }
#login .login-sub strong{ color:var(--cyan); }
#login .login-note{ color:var(--txt-faint) !important; font-size:11px; line-height:1.45; margin:12px 0 0; text-align:center; }
#login .login-staff{ margin-top:14px; text-align:center; }
#login .login-staff a{ color:var(--txt-faint) !important; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
#login .login-staff a:hover{ color:var(--violet-2) !important; }
#login .tgc-btn{ font-size:14px; padding:14px 16px; margin:4px 0 0; }

/* =========================================================================
   FIDDY LOGIN REDESIGN — synthwave entry (evokes fiddy.org, not 1:1)
   grid floor + horizon glow + single focused glass card + gold accent,
   layered over the game's own planet/space backdrop.
   ========================================================================= */
html,body{ overflow-x:hidden; }
body{ position:relative; min-height:100vh; }

/* --- synthwave perspective grid floor --- */
body::before{
  content:''; position:fixed; left:-30%; right:-30%; bottom:0; height:62vh; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(33,247,216,.55) 1.4px, transparent 1.4px),
    linear-gradient(to bottom, rgba(124,92,255,.50) 1.4px, transparent 1.4px);
  background-size:54px 54px;
  transform:perspective(420px) rotateX(68deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top, #000 2%, rgba(0,0,0,.85) 30%, transparent 90%);
          mask-image:linear-gradient(to top, #000 2%, rgba(0,0,0,.85) 30%, transparent 90%);
  opacity:.9; animation:fiddyGrid 7s linear infinite;
}
@keyframes fiddyGrid{ from{ background-position:0 0,0 0; } to{ background-position:0 54px,0 0; } }

/* --- horizon glow streak (gold -> cyan) where floor meets sky --- */
body::after{
  content:''; position:fixed; left:0; right:0; top:40vh; height:1px; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, transparent 6%, rgba(232,196,122,.55) 28%,
            rgba(33,247,216,.65) 50%, rgba(232,196,122,.55) 72%, transparent 94%);
  box-shadow:0 0 30px 7px rgba(232,196,122,.20), 0 0 70px 16px rgba(33,247,216,.13);
}

/* lift real content above the grid/horizon */
#main{ position:relative !important; z-index:1; }

/* --- home: vertically-centered focused hero --- */
.page-home #main{ max-width:540px !important; padding:40px 18px 56px !important; gap:18px !important; justify-content:center !important; }
.page-home #rightmenu{ display:none !important; }          /* hide lore card — keep the entry focused */

/* wordmark */
#tfg_logo{ order:0 !important; margin:0 0 2px !important; }
#tfg_logo img{
  width:auto !important; max-width:300px !important;
  filter:drop-shadow(0 0 16px rgba(33,247,216,.38)) drop-shadow(0 0 30px rgba(124,92,255,.30))
         drop-shadow(0 0 44px rgba(232,196,122,.12)) !important;
  animation:fiddyFade .7s ease both;
}

/* --- hero login card --- */
.page-home #login{
  order:1 !important; position:relative !important; left:auto !important; top:auto !important;
  width:100% !important; max-width:438px !important; margin:0 !important; padding:30px 30px 22px !important;
  background:var(--glass) !important; border:1px solid var(--line) !important; border-radius:20px !important;
  box-shadow:0 26px 72px rgba(0,0,0,.62), 0 0 0 1px rgba(33,247,216,.05),
             inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  animation:fiddyRise .6s cubic-bezier(.2,.7,.3,1) both;
}
.page-home #login::before{                                 /* gold->cyan top accent */
  content:''; position:absolute; left:24px; right:24px; top:-1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--gold), var(--cyan), transparent); opacity:.95;
}
#login_input{ position:static !important; width:auto !important; text-align:center; }

.login-eyebrow{
  font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; justify-content:center; gap:7px; margin:0 0 14px;
}
.login-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 9px var(--cyan); }

#login .login-title{
  font-family:'Orbitron',sans-serif !important; font-size:25px !important; font-weight:800 !important;
  letter-spacing:.02em; text-transform:uppercase; color:var(--txt) !important;
  text-shadow:0 0 22px rgba(124,92,255,.42); margin:0 0 10px !important;
}
#login .login-sub{ color:var(--txt-dim) !important; font-size:12.5px; line-height:1.55; margin:0 auto 20px; max-width:330px; }
#login .login-sub strong{ color:var(--cyan); }

#login .tgc-btn{
  display:block; width:100%; box-sizing:border-box; text-align:center;
  font-family:'Orbitron',sans-serif !important; font-weight:700; font-size:13.5px !important;
  letter-spacing:.04em; text-transform:uppercase; color:#04030a !important;
  background:var(--grad) !important; border:none !important; border-radius:13px !important;
  padding:15px 18px !important; margin:0 !important; box-shadow:0 10px 30px rgba(124,92,255,.4); cursor:pointer;
  transition:transform .14s ease, box-shadow .2s ease, filter .18s ease;
}
#login .tgc-btn:hover{ filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 16px 42px rgba(33,247,216,.34); text-shadow:none !important; }
#login .tgc-btn:active{ transform:translateY(0) scale(.99); }
#login .tgc-btn .arw{ display:inline-block; transition:transform .18s ease; }
#login .tgc-btn:hover .arw{ transform:translateX(4px); }

#login .login-note{ color:var(--txt-faint) !important; font-size:11px; line-height:1.5; margin:14px auto 0; max-width:330px; }
#login .login-staff{ margin-top:16px; }
#login .login-staff a{ color:var(--txt-faint) !important; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
#login .login-staff a:hover{ color:var(--gold) !important; text-shadow:none; }
#login #login_footer{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); text-align:center; }
#login #copyright{ color:var(--txt-faint) !important; font-size:10.5px; }
#login #downmenu{ margin-top:6px; }
#login #downmenu a{ margin:0 7px; color:var(--txt-dim) !important; font-size:10.5px; }
#login #downmenu a:hover{ color:var(--cyan) !important; }

/* --- slim nav pills below the card --- */
.page-home #mainmenu{ order:2 !important; gap:8px; margin:4px 0 0 !important; }
.page-home #mainmenu br{ display:none; }
.page-home #mainmenu a, .page-home #mainmenu .menupoint{ padding:7px 14px !important; font-size:11px !important; }

/* entrance animations */
@keyframes fiddyRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes fiddyFade{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  body::before{ animation:none; }
  #tfg_logo img, .page-home #login{ animation:none; }
}

/* --- small screens --- */
@media (max-width:520px){
  .page-home #main{ padding:26px 14px 48px !important; }
  #tfg_logo img{ max-width:230px !important; }
  .page-home #login{ padding:24px 20px 18px !important; border-radius:18px !important; }
  #login .login-title{ font-size:22px !important; }
  body::before{ height:52vh; } body::after{ top:46vh; }
}

/* --- two-action sign-in: primary "Log in" + secondary "Create an account" --- */
#login .login-actions{ display:flex; flex-direction:column; gap:10px; }
#login .tgc-btn-alt{
  background:transparent !important; color:var(--cyan) !important;
  border:1px solid var(--line-cyan) !important; box-shadow:none !important;
}
#login .tgc-btn-alt:hover{
  color:var(--cyan) !important; background:rgba(33,247,216,.10) !important;
  border-color:var(--cyan) !important; filter:none; transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(33,247,216,.16) !important; text-shadow:none !important;
}

/* --- native sign-in form (NEXUS) --- */
.auth-tabs{ display:flex; gap:6px; background:rgba(8,6,20,.5); border:1px solid var(--line);
  border-radius:12px; padding:4px; margin:6px 0 14px; }
.auth-tab{ flex:1; padding:9px 10px; border:0; background:transparent; color:var(--txt-dim);
  font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  border-radius:9px; cursor:pointer; transition:background .15s ease, color .15s ease; }
.auth-tab:hover{ color:var(--txt); }
.auth-tab.is-active{ background:var(--grad); color:#04030a; box-shadow:0 6px 18px rgba(124,92,255,.30); }

.auth-form{ display:flex; flex-direction:column; gap:11px; text-align:left; }
.auth-field{ display:flex; flex-direction:column; gap:5px; }
.auth-field > span{ font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--txt-dim); font-family:'Orbitron',sans-serif; }
.auth-field input{ background:rgba(8,6,20,.85) !important; border:1px solid var(--line) !important;
  color:var(--txt) !important; border-radius:10px !important; padding:11px 13px !important;
  font-size:14px; font-family:'Inter',sans-serif; width:100%; box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease; }
.auth-field input::placeholder{ color:var(--txt-faint); }
.auth-field input:focus{ outline:none; border-color:var(--cyan) !important; box-shadow:0 0 0 3px rgba(33,247,216,.18); }
.auth-form .tgc-btn{ margin-top:4px; }

.auth-aux{ font-size:11px; color:var(--txt-faint); text-align:center; }
.auth-aux a{ color:var(--cyan) !important; }
.auth-aux a:hover{ color:var(--violet-2) !important; text-shadow:none; }

.auth-msg{ font-size:12px; line-height:1.45; padding:10px 12px; border-radius:10px; margin:0 0 12px; text-align:left; }
.auth-msg.err{ background:rgba(255,61,120,.10); border:1px solid rgba(255,61,120,.40); color:#ff9bae; }
.auth-msg.ok{ background:rgba(33,247,216,.10); border:1px solid var(--line-cyan); color:var(--cyan); }

#login .tgc-btn:disabled, #login .tgc-btn.is-working{ opacity:.7; cursor:wait; filter:none; transform:none; }
/* [hidden] must win over .auth-form's display:flex */
.auth-form[hidden], .auth-msg[hidden]{ display:none !important; }