/* ══════════════════════════════
   CONFIG SCREEN
══════════════════════════════ */
#configScreen{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:2rem;
}
.config-box{
  background:linear-gradient(145deg,var(--surface),var(--bg2));
  border:1px solid var(--border2);
  border-radius:20px;
  padding:2.5rem;
  width:100%;max-width:560px;
  box-shadow:var(--glow),0 40px 80px rgba(0,0,0,0.6);
  position:relative;overflow:hidden;
}
.config-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.brand-logo{
  font-family:'Cinzel Decorative',serif;
  font-size:1.8rem;font-weight:900;
  background:linear-gradient(135deg,var(--gold2),var(--gold),#8a6a20);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:0.05em;margin-bottom:0.2rem;
  filter:drop-shadow(0 0 20px rgba(201,168,76,0.4));
}
.brand-sub{color:var(--text3);font-size:0.85rem;margin-bottom:2rem;letter-spacing:0.15em;font-family:'Cinzel',serif;}
.cfg-step{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:12px;padding:1.25rem;margin-bottom:1rem;
}
.cfg-step h3{
  font-family:'Cinzel',serif;font-size:0.7rem;letter-spacing:0.15em;
  color:var(--gold);margin-bottom:0.75rem;
}
.cfg-step p{font-size:0.9rem;color:var(--text2);line-height:1.7;margin-bottom:0.6rem;}
.cfg-step code{
  background:var(--bg);border:1px solid var(--border);border-radius:4px;
  padding:0.15rem 0.4rem;font-size:0.8rem;color:var(--teal);font-family:monospace;
}
.code-block{
  background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:0.9rem 1rem;font-family:monospace;font-size:0.72rem;color:var(--teal);
  white-space:pre;line-height:1.6;margin-top:0.5rem;position:relative;overflow-x:auto;
}
.copy-btn{
  position:absolute;top:0.5rem;right:0.5rem;
  background:var(--surface2);border:1px solid var(--border);color:var(--text2);
  border-radius:5px;padding:0.2rem 0.6rem;font-size:0.65rem;cursor:pointer;
  font-family:'Cinzel',serif;letter-spacing:0.06em;transition:all 0.2s;
}
.copy-btn:hover{border-color:var(--gold);color:var(--gold);}
.cfg-label{
  font-family:'Cinzel',serif;font-size:0.62rem;letter-spacing:0.12em;
  color:var(--text2);display:block;margin-bottom:0.35rem;
}
.cfg-input{
  width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-family:monospace;font-size:0.82rem;
  padding:0.65rem 0.9rem;outline:none;transition:border-color 0.2s,box-shadow 0.2s;
  margin-bottom:0.85rem;
}
.cfg-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,0.1);}
.cfg-save-btn{
  width:100%;
  background:linear-gradient(135deg,var(--gold),var(--gold-dim));
  color:#0a0800;border:none;border-radius:8px;
  font-family:'Cinzel',serif;font-size:0.82rem;letter-spacing:0.12em;
  padding:0.85rem;cursor:pointer;transition:all 0.2s;margin-top:0.5rem;
  font-weight:700;box-shadow:0 4px 20px rgba(201,168,76,0.3);
}
.cfg-save-btn:hover{transform:translateY(-1px);box-shadow:0 6px 25px rgba(201,168,76,0.4);}

/* ══════════════════════════════
   AUTH SCREEN
══════════════════════════════ */
#authScreen{
  position:relative;z-index:10;
  display:none;align-items:center;justify-content:center;
  min-height:100vh;padding:2rem;
}
.auth-box{
  background:linear-gradient(145deg,var(--surface),var(--bg2));
  border:1px solid var(--border2);border-radius:20px;
  padding:3rem 2.5rem;width:100%;max-width:420px;
  box-shadow:var(--glow),0 40px 80px rgba(0,0,0,0.6);
  position:relative;overflow:hidden;text-align:center;
}
.auth-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.auth-emblem{
  font-size:3rem;margin-bottom:1rem;
  filter:drop-shadow(0 0 20px rgba(201,168,76,0.5));
}
.auth-tagline{color:var(--text2);font-size:1rem;margin-bottom:2rem;font-style:italic;}
.auth-tabs{
  display:flex;border:1px solid var(--border);border-radius:8px;
  overflow:hidden;margin-bottom:1.5rem;
}
.auth-tab{
  flex:1;background:transparent;border:none;color:var(--text2);
  font-family:'Cinzel',serif;font-size:0.7rem;letter-spacing:0.1em;
  padding:0.65rem;cursor:pointer;transition:all 0.2s;
  border-right:1px solid var(--border);
}
.auth-tab:last-child{border-right:none;}
.auth-tab.active{background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:#0a0800;font-weight:700;}
.auth-form{display:flex;flex-direction:column;gap:0.75rem;}
.auth-input{
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-family:'EB Garamond',serif;font-size:1rem;
  padding:0.7rem 1rem;outline:none;transition:all 0.2s;text-align:left;
}
.auth-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,0.1);}
.auth-btn{
  background:linear-gradient(135deg,var(--gold),var(--gold-dim));
  color:#0a0800;border:none;border-radius:8px;
  font-family:'Cinzel',serif;font-size:0.8rem;letter-spacing:0.1em;font-weight:700;
  padding:0.8rem;cursor:pointer;transition:all 0.2s;margin-top:0.25rem;
  box-shadow:0 4px 20px rgba(201,168,76,0.3);
}
.auth-btn:hover{transform:translateY(-1px);box-shadow:0 6px 25px rgba(201,168,76,0.4);}
.auth-error{font-size:0.85rem;min-height:1.2rem;text-align:left;padding:0.1rem 0;}
.auth-cfg-link{
  margin-top:1.5rem;font-size:0.8rem;color:var(--text3);
  cursor:pointer;transition:color 0.2s;
}
.auth-cfg-link:hover{color:var(--text2);}