:root {
      --bg: rgba(0,0,0,0.6);
      --card: #fff;
      --accent: #0078d4;
      }
html,body { height:100%; margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
        /* overlay */
.overlay {
        position: fixed;
        inset: 0;
        background: var(--bg);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        }
.card {
        width: 320px;
        max-width: calc(100% - 40px);
        background: var(--card);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.3);
        }
.card h2 { margin:0 0 12px; font-size:1.125rem; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
        label { font-size:0.875rem; color:#222; }
        input[type="text"], input[type="password"] {
            padding:10px 12px;
            border:1px solid #ccc;
            border-radius:6px;
            font-size:1rem;
            outline: none;
        }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,120,212,0.12); }
.actions { display:flex; gap:8px; justify-content: flex-end; }
button {
            padding:8px 12px;
            border-radius:6px;
            border: none;
            cursor: pointer;
            font-size:0.95rem;
         }
.btn-secondary { background:#eee; color:#111; }
.btn-secondary_long {background: #eee; color:#111; width: 150px ;}
.btn-primary { background:var(--accent); color:#fff; }
.close-btn { position:absolute; top:12px; right:12px; background:transparent; border:none; color:#fff; font-size:1.25rem; cursor:pointer; }
.theading {
    background-color: var(--accent);
    color: rgb(0, 0, 0);
    padding: 10px;
    text-align: left;
    font-size: 2rem;
    font-weight: bold;
}
.bigbutton {
                background-color: var(--accent);
                padding: 15px 15px;
                border-radius:150px;
                margin: 15px 5px;
                width: 250px;
                border: black;
                cursor: pointer;
                font-size:0.95rem;
                align-items: center;
         }

h1 {
    font-size: 2rem;
    text-align: left;   
    padding: 10px;
}
p {
    font-size: 1.25rem;
    text-align: left;   
    padding: 10px;
}
.actionsover button {
    display: block; 
    margin-bottom: 10px;
    padding: 10px;
}
.actionstop { 
        display:flex; gap:8px; 
        justify-content: flex-end; 
        position: fixed;
        top: 0;
        right: 0;
        padding: 10px;  
}
.vok_vid {
        width: 300px;
        height: 200px;
        padding: 10px;
}
.lex {
    display: flex;
    flex-wrap: wrap;
    gap: 500px;
}