/* ----------------------------------------------------
   Cascadia Mono Light (.ttf)
---------------------------------------------------- */
@font-face {
    font-family: 'Cascadia Mono Light';
    src: url('fonts/CascadiaMono.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* ----------------------------------------------------
   ΓΕΝΙΚΑ
---------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
    font-family: 'Cascadia Mono Light', 'Cascadia Mono', monospace;
    background: #fff;
    margin: 0;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ----------------------------------------------------
   STEP TITLE
---------------------------------------------------- */
.step-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* ----------------------------------------------------
   ΦΟΡΜΑ & ΠΕΔΙΑ
---------------------------------------------------- */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.field-wrapper { text-align: center; }

input[type="text"] {
    width: 220px;
    padding: 8px 12px;
    font-size: 18px;
    border: 2px solid #ccc;
    border-radius: 6px;
    text-align: center;
    outline: none;
    transition: border-color .2s ease;
    font-family: inherit;
}

input[type="text"]:focus { border-color: #003366; }

/* Placeholder */
input[type="text"]::placeholder {
    font-family: inherit;
    color: #999;
}

/* ----------------------------------------------------
   ΚΟΥΜΠΙ
---------------------------------------------------- */
button {
    margin-top: 16px;
    padding: 10px 24px;
    background: navy;             /* navy */
    border: none;
    color: #fff;
    font-size: 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .2s ease;
    font-family: inherit;
}

button:hover { background: #00144d; }

/* ----------------------------------------------------
   ΜΗΝΥΜΑΤΑ
---------------------------------------------------- */
.msg {
    font-size: 14px;
    display: block;
    margin-top: 4px;
}

.msg.success { color: #28a745; }
.msg.error   { color: #dc3545; }