:root{
  --cy-bg:#050a12;
  --cy-bg-2:#08111d;
  --cy-panel:rgba(10,22,37,.82);
  --cy-panel-2:rgba(14,29,47,.86);
  --cy-border:rgba(87,151,220,.22);
  --cy-blue:#1687ff;
  --cy-blue-2:#2b9bff;
  --cy-red:#ff2222;
  --cy-text:#f7f9fc;
  --cy-muted:#9bb0c9;
  --cy-muted-2:#7890aa;
  --cy-shadow:0 24px 70px rgba(0,0,0,.45);
}

html,body,#root{
  min-height:100%;
  background:#050a12!important;
}

body{
  margin:0 !important;
  color:var(--cy-text) !important;
  background-image:url("/cyslodiahost-background.png") center top / cover fixed no-repeat !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}

/* Decorative emblem watermarks are included in the background image. */

header{
  position:relative!important;
  z-index:20!important;
  height:76px!important;
  min-height:76px!important;
  background:rgba(6,14,24,.62)!important;
  border-bottom:2px solid rgba(28,145,255,.95)!important;
  box-shadow:0 5px 25px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(16px)!important;
}

header > div{
  max-width:none!important;
  height:100%!important;
  padding:0 84px!important;
}

header > div > div{
  height:100%!important;
}

header a[href="/"]{
  padding:0!important;
  background:transparent!important;
  color:#f5f7fa!important;
}

header a[href="/"] img{
  width:48px!important;
  height:48px!important;
  object-fit:contain!important;
  margin-right:17px!important;
}

header a[href="/"] span{display:none!important;}

header > div > div::after{
  content:"Sichere Geheimnisse. Einfach geteilt.";
  margin-left:auto;
  color:#d6e4f4;
  font-size:14px;
  font-weight:500;
  letter-spacing:.01em;
}

#main-content{
  position:relative;
  z-index:2;
  outline:none!important;
}

main{
  position:relative;
  z-index:2;
  min-height:calc(100vh - 76px)!important;
  padding:45px 20px 90px!important;
}

.cy-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin:0 auto 28px;
  max-width:900px;
}

.cy-hero-logo{
  width:150px;
  height:150px;
  object-fit:contain;
  margin-bottom:8px;
  filter:drop-shadow(0 12px 22px rgba(255,28,28,.16));
}

.cy-hero-title{
  display:none!important;
  margin:0!important;
  color:#fff!important;
  font-size:54px!important;
  line-height:1.04!important;
  font-weight:850!important;
  letter-spacing:.02em!important;
  text-transform:uppercase;
}

.cy-hero-heading{
  margin:30px 0 0!important;
  color:#fff!important;
  font-size:28px!important;
  line-height:1.2!important;
  font-weight:750!important;
}

.cy-hero-copy{
  margin:16px auto 0!important;
  max-width:720px;
  color:#9fb5cf!important;
  font-size:18px!important;
  line-height:1.55!important;
}

.cy-workspace{
  width:min(800px,calc(100vw - 40px));
  margin:0 auto;
  padding:26px!important;
  border:1px solid var(--cy-border)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(10,25,42,.92),rgba(7,18,31,.92))!important;
  box-shadow:var(--cy-shadow),inset 0 1px rgba(255,255,255,.035)!important;
}

.cy-mode-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:26px;
}

.cy-mode{
  appearance:none;
  border:1px solid rgba(92,139,185,.20);
  border-radius:10px;
  padding:16px 15px;
  min-height:78px;
  text-align:left;
  color:#fff;
  background:linear-gradient(145deg,rgba(18,38,62,.82),rgba(12,27,45,.82));
  cursor:pointer;
  transition:.18s ease;
}
.cy-mode:hover{
  border-color:rgba(30,148,255,.55);
  transform:translateY(-1px);
}
.cy-mode.active{
  border:2px solid var(--cy-blue);
  padding:15px 14px;
  box-shadow:0 0 20px rgba(22,135,255,.12);
}
.cy-mode-icon{
  display:block;
  color:#83b7ef;
  font-size:26px;
  line-height:1;
  margin-bottom:7px;
}
.cy-mode-title{
  display:block;
  font-size:15px;
  font-weight:700;
}
.cy-mode-sub{
  display:block;
  color:#91a8c1;
  font-size:13px;
  margin-top:3px;
}

.cy-form-shell{
  display:contents;
}

/* Make the actual Yopass form feel like the reference card */
.cy-workspace textarea,
.cy-workspace input:not([type="checkbox"]):not([type="radio"]),
.cy-workspace select{
  background:rgba(14,31,51,.9)!important;
  border:1px solid rgba(87,151,220,.26)!important;
  color:#f6f9fd!important;
  border-radius:9px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
}

.cy-workspace textarea{
  min-height:142px!important;
  resize:vertical!important;
}

.cy-workspace textarea::placeholder,
.cy-workspace input::placeholder{
  color:#849ab3!important;
}

.cy-workspace label{
  color:#dbe8f5!important;
}

.cy-workspace .btn-primary,
.cy-workspace button[type="submit"]{
  min-height:54px!important;
  border-radius:9px!important;
  border-color:var(--cy-blue)!important;
  background:linear-gradient(90deg,#1282ff,#218fff)!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:750!important;
  box-shadow:0 8px 24px rgba(20,126,255,.18)!important;
}
.cy-workspace .btn-primary:hover,
.cy-workspace button[type="submit"]:hover{
  background:linear-gradient(90deg,#218fff,#38a0ff)!important;
}

.cy-footer{
  position:relative;
  z-index:3;
  height:85px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border-top:1px solid rgba(87,151,220,.17);
  background:rgba(5,13,23,.72);
  color:#91a6be;
  font-size:13px;
}
.cy-footer-logo{
  width:27px;height:27px;object-fit:contain;
}
.cy-footer-brand{display:none!important;}
.cy-footer-separator{display:none!important;}
.cy-footer-tagline{
  color:#91a6be;
}

@media(max-width:800px){
  header > div{padding:0 20px!important;}
  header > div > div::after{display:none;}
  .cy-hero-title{font-size:40px!important;}
  .cy-hero-heading{font-size:23px!important;}
  .cy-hero-copy{font-size:16px!important;}
  .cy-mode-strip{grid-template-columns:1fr;}
  .cy-workspace{padding:18px!important;}
}