#settings {
    width: 100%;
    height: 100%;

    position: absolute;
    z-index: 101;

    backdrop-filter: blur(12px);                /* der Blur-Effekt – 8–20px sind meist schön */
    -webkit-backdrop-filter: blur(12px);        /* für Safari/iOS */
}

#settingsButtons {
    width: 60%;
    height: auto;

    padding: 21px;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background: #333;
    border-radius: 9px;
}

.settingButton {
    width: 100%;

    margin-bottom: 5px;
    padding: 12px;

    font-size: 1.05rem;

    background: silver;
    color: #3498db;
    border: 1px solid #3498db;
    border-radius: 8px;

    cursor: pointer;
}

.settingButton:hover {
    background: #3498db;
    color: silver;
    border: 1px solid silver;
}

#settingsButtons button {
    width: 100%;

    margin-bottom: 5px;
    padding: 12px;

    font-size: 1.05rem;

    background: silver;
    color: #3498db;
    border: 1px solid #3498db;
    border-radius: 8px;

    cursor: pointer;
}

#settingsButtons button:hover {
    background: #3498db;
    color: silver;
    border: 1px solid silver;
}


/* ADD SEED */
#addSeed {
    width: 100%;
    height: 100%;

    position: absolute;
    z-index: 101;

    backdrop-filter: blur(12px);                /* der Blur-Effekt – 8–20px sind meist schön */
    -webkit-backdrop-filter: blur(12px);        /* für Safari/iOS */
}

#addSeedCard {
    width: 60%;
    height: auto;

    position: absolute;
    left: 47%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#seedInput {
    width: 103%;
    height: 25%;

    padding: 8px;

    border: 1px solid black;
    border-radius: 9px;
    
    background: #333;
    color: #ddd;

    resize: none;
}

#seedPW {
    width: 100%;
    height: auto;

    margin-top: 15px;
    margin-bottom: 5px;
    padding: 15px;

    border: 1px solid #ddd;
    border-radius: 9px;

    background: #222;
    color: #3498db;
}

#addSeedButtons {
    width: 100%;

    padding: 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#addSeedButtons button {
    width: 50%;
    padding: 15px;

    border: 1px solid #ddd;
    border-radius: 9px;

    color: #ddd;

    cursor: pointer;
}

#addSeedButtons button:hover {
    border: 1px solid black;

    color: black;
}


/* SHOW SEED */
#showSeed {
    width: 100%;
    height: 100%;

    position: absolute;
    z-index: 101;

    backdrop-filter: blur(12px);                /* der Blur-Effekt – 8–20px sind meist schön */
    -webkit-backdrop-filter: blur(12px);        /* für Safari/iOS */
}

#showSeedCard {
    width: 60%;
    height: auto;

    position: absolute;
    left: 47%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#showSeedText {
    width: 103%;
    height: 25%;

    padding: 8px;

    border: 1px solid black;
    border-radius: 9px;
    
    background: #333;
    color: #ddd;

    resize: none;
}

#showSeedPW {
    width: 100%;
    height: auto;

    margin-top: 15px;
    margin-bottom: 5px;
    padding: 15px;

    border: 1px solid #ddd;
    border-radius: 9px;

    background: #222;
    color: #3498db;
}

#showSeedButtons {
    width: 100%;

    padding: 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#showSeedButtons button {
    width: 50%;
    padding: 15px;

    border: 1px solid #ddd;
    border-radius: 9px;

    color: #ddd;

    cursor: pointer;
}

#showSeedButtons button:hover {
    border: 1px solid black;

    color: black;
}


/* ADD KEY */
#addKey {
    width: 100%;
    height: 100%;

    position: absolute;
    z-index: 101;

    backdrop-filter: blur(12px);                /* der Blur-Effekt – 8–20px sind meist schön */
    -webkit-backdrop-filter: blur(12px);        /* für Safari/iOS */
}

#addKeyCard {
    width: 60%;
    height: auto;

    position: absolute;
    left: 47%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#keyInput {
    width: 103%;
    height: 25%;

    padding: 8px;

    border: 1px solid black;
    border-radius: 9px;
    
    background: #333;
    color: #ddd;

    resize: none;
}

#keyPW {
    width: 100%;
    height: auto;

    margin-top: 15px;
    margin-bottom: 5px;
    padding: 15px;

    border: 1px solid #ddd;
    border-radius: 9px;

    background: #222;
    color: #3498db;
}

#addKeyButtons {
    width: 100%;

    padding: 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#addKeyButtons button {
    width: 50%;
    padding: 15px;

    border: 1px solid #ddd;
    border-radius: 9px;

    color: #ddd;

    cursor: pointer;
}

#addKeyButtons button:hover {
    border: 1px solid black;

    color: black;
}


/* SHOW Key */
#showKey {
    width: 100%;
    height: 100%;

    position: absolute;
    z-index: 101;

    backdrop-filter: blur(12px);                /* der Blur-Effekt – 8–20px sind meist schön */
    -webkit-backdrop-filter: blur(12px);        /* für Safari/iOS */
}

#showKeyCard {
    width: 60%;
    height: auto;

    position: absolute;
    left: 47%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#showKeyText {
    width: 103%;
    height: 25%;

    padding: 8px;

    border: 1px solid black;
    border-radius: 9px;
    
    background: #333;
    color: #ddd;

    resize: none;
}

#showKeyPW {
    width: 100%;
    height: auto;

    margin-top: 15px;
    margin-bottom: 5px;
    padding: 15px;

    border: 1px solid #ddd;
    border-radius: 9px;

    background: #222;
    color: #3498db;
}

#showKeyButtons {
    width: 100%;

    padding: 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#showKeyButtons button {
    width: 50%;
    padding: 15px;

    border: 1px solid #ddd;
    border-radius: 9px;

    color: #ddd;

    cursor: pointer;
}

#showKeyButtons button:hover {
    border: 1px solid black;

    color: black;
}