.main-frame {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 560px;
    background: rgba(10, 12, 18, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 44px 38px;
    backdrop-filter: blur(25px);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.9), 0 0 30px var(--active-glow);
    transition: box-shadow 0.5s ease;
}

.seal-container { text-align: center; margin-bottom: 24px; }
.seal-glyph {
    display: inline-flex; width: 54px; height: 54px;
    border: 1px solid var(--active-accent); border-radius: 50%;
    align-items: center; justify-content: center;
    box-shadow: 0 0 20px var(--active-glow); transition: all 0.5s ease;
    position: relative;
}
.seal-glyph::before {
    content: ''; position: absolute; width: 42px; height: 42px;
    border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: 50%;
    animation: rotateSeal 20s linear infinite;
}
@keyframes rotateSeal { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.seal-inner { font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--active-accent); font-weight: 900; }

.title-block { text-align: center; margin-bottom: 28px; }
.title-block h1 {
    font-family: 'Cinzel', serif; font-size: 2.2rem; letter-spacing: 6px; font-weight: 900;
    text-transform: uppercase; background: linear-gradient(180deg, #ffffff 40%, #6b7280 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
.title-block .subtitle { font-size: 0.72rem; color: #9ca3af; letter-spacing: 3px; text-transform: uppercase; margin-top: 6px; font-weight: 600; }

.dogovor-quote {
    font-size: 0.75rem; color: #64748b; font-style: italic; text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 14px; margin-bottom: 26px; letter-spacing: 0.5px;
}

.mode-nav { display: flex; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 4px; margin-bottom: 24px; }
.mode-btn {
    flex: 1; padding: 12px 10px; background: transparent; border: none; color: #94a3b8;
    font-weight: 600; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mode-btn.active { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); }

.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; color: #94a3b8; margin-bottom: 8px; font-weight: 600; }
.field-box { position: relative; }
.field-box input {
    width: 100%; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px; padding: 14px 16px; color: #fff; font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem; outline: none; transition: border-color 0.3s, box-shadow 0.3s;
}
.field-box input:focus { border-color: var(--active-accent); box-shadow: 0 0 15px var(--active-glow); }

.faction-deck { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 10px; }
.faction-node {
    background: rgba(15, 20, 30, 0.4); border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px; padding: 16px 8px; text-align: center; cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
}
.faction-node::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; opacity: 0; transition: opacity 0.3s ease; }
.faction-node[data-f="light"]::before { background: var(--light-core); box-shadow: 0 0 10px var(--light-core); }
.faction-node[data-f="dark"]::before { background: var(--dark-core); box-shadow: 0 0 10px var(--dark-core); }
.faction-node[data-f="inquisition"]::before { background: var(--inq-core); box-shadow: 0 0 10px var(--inq-core); }
.faction-node:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.2); }
.faction-node.chosen { background: rgba(20, 26, 40, 0.7); transform: translateY(-2px); }
.faction-node.chosen[data-f="light"] { border-color: var(--light-core); box-shadow: 0 0 20px var(--light-glow); }
.faction-node.chosen[data-f="dark"] { border-color: var(--dark-core); box-shadow: 0 0 20px var(--dark-glow); }
.faction-node.chosen[data-f="inquisition"] { border-color: var(--inq-core); box-shadow: 0 0 20px var(--inq-glow); }
.faction-node.chosen::before { opacity: 1; }
.faction-rune { font-family: 'Cinzel', serif; font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
.faction-creed { font-size: 0.65rem; color: #94a3b8; letter-spacing: 0.5px; }

.gate-button {
    width: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--active-accent); color: #fff; border-radius: 12px; padding: 16px;
    font-family: 'Cinzel', serif; font-size: 0.95rem; letter-spacing: 2px; text-transform: uppercase;
    font-weight: 700; cursor: pointer; box-shadow: 0 0 25px var(--active-glow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-top: 14px; position: relative; overflow: hidden;
}
.gate-button:hover { background: var(--active-accent); color: #050608; box-shadow: 0 0 40px var(--active-accent); }
.gate-button:active { transform: scale(0.98); }

.status-box { margin-top: 16px; padding: 12px; border-radius: 8px; font-size: 0.8rem; text-align: center; display: none; letter-spacing: 0.5px; font-weight: 500; }
.status-error { background: rgba(239, 68, 68, 0.12); border: 1px solid var(--dark-core); color: #fca5a5; }
.status-success { background: rgba(56, 189, 248, 0.12); border: 1px solid var(--light-core); color: #bae6fd; }