* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    height: 100vh;
    background: #0f1115;
    color: #e6e6e6;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
}

h1 {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

h1 span {
    color: #ff8a2a;
}

.subtitle {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: #9aa0a6;
    letter-spacing: 0.1em;
}

.contact {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.contact a {
    text-decoration: none;
    color: #e6e6e6;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border: 1px solid #1f232b;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.contact a:hover {
    border-color: #ff8a2a;
    color: #ff8a2a;
    background: rgba(255, 138, 42, 0.05);
}

/* Topbar */

.topbar{

  position: sticky;

  top: 0;

  z-index: 20;

  background: rgba(15,17,21,.92);

  border-bottom: 1px solid #1f232b;

  backdrop-filter: blur(8px);

}



.topbar-inner{

  max-width: 1100px;

  margin: 0 auto;

  padding: 14px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.brand{

  display:flex;

  flex-direction:column;

  gap:2px;

}



.brand-title{

  font-weight: 700;

  letter-spacing: .12em;

}



.accent{ color:#ff8a2a; }



.brand-sub{

  font-size:.8rem;

  color:#9aa0a6;

  letter-spacing:.08em;

}



.page{

  max-width: 1100px;

  margin: 22px auto;

  padding: 0 18px;

}



/* User menu */

.user-menu{ position: relative; }



.user-btn{

  display:flex;

  align-items:center;

  gap:10px;

  padding: 8px 10px;

  border-radius: 12px;

  border: 1px solid #1f232b;

  background: rgba(255,255,255,.02);

  color:#e6e6e6;

  cursor:pointer;

  transition: all .18s ease;

}



.user-btn:hover{

  border-color:#ff8a2a;

  background: rgba(255,138,42,.06);

}



.user-avatar{

  width: 34px;

  height: 34px;

  border-radius: 50%;

  border: 1px solid #1f232b;

}



.user-text{

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  line-height: 1.1;

}



.user-display{

  font-weight: 650;

  font-size: .92rem;

}



.user-name{

  font-size: .78rem;

  color:#9aa0a6;

}



.chev{

  margin-left: 2px;

  color:#9aa0a6;

}



/* Dropdown */

.dropdown{

  position:absolute;

  right:0;

  top: calc(100% + 10px);

  min-width: 180px;

  padding: 8px;

  border-radius: 12px;

  border: 1px solid #1f232b;

  background: #12151c;

  box-shadow: 0 12px 30px rgba(0,0,0,.35);

  display:none;

}



.dropdown.open{ display:block; }



.dropdown-item{

  display:block;

  text-decoration:none;

  color:#e6e6e6;

  padding: 10px 10px;

  border-radius: 10px;

  border: 1px solid transparent;

}



.dropdown-item:hover{

  color:#ff8a2a;

  background: rgba(255,138,42,.06);

  border-color:#1f232b;

}



*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

body{height:100vh;background:#0f1115;color:#e6e6e6;display:flex;align-items:center;justify-content:center}

.container{text-align:center;padding:24px}

h1{font-size:3.2rem;font-weight:700;letter-spacing:.15em}

h1 span{color:#ff8a2a}

.subtitle{margin-top:.4rem;font-size:.95rem;color:#9aa0a6;letter-spacing:.12em}

.card{margin-top:2.2rem;background:#12151c;border:1px solid #1f232b;border-radius:12px;padding:22px;max-width:420px}

.hint{color:#c9cdd3;font-size:.95rem;margin-bottom:14px;letter-spacing:.06em}

.buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.btn{display:inline-block;text-decoration:none;color:#e6e6e6;font-size:.95rem;padding:.65rem 1.1rem;border:1px solid #1f232b;border-radius:10px;transition:all .18s ease;background:rgba(255,255,255,.02)}

.btn:hover{border-color:#ff8a2a;color:#ff8a2a;background:rgba(255,138,42,.06)}

.fineprint{margin-top:14px;color:#6f7682;font-size:.8rem}

.app-header {

  height: 64px;

  background: #0b0b0b;

  border-bottom: 1px solid rgba(255,255,255,0.06);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 24px;

}



.logo {

  font-size: 20px;

  font-weight: 800;

  text-decoration: none;

  color: #fff;

}



.logo span {

  color: #ff7a18;

}



.user-box {

  display: flex;

  align-items: center;

  gap: 12px;

}



.user-box img {

  width: 32px;

  height: 32px;

  border-radius: 50%;

}



.username {

  font-size: 14px;

  color: #ddd;

}



.logout {

  margin-left: 10px;

  font-size: 13px;

  color: #ff7a18;

  text-decoration: none;

}



.logout:hover {

  text-decoration: underline;

}