/* DNSOrbit sign-in page (templates/login.html), on top of dno-orbit.css (tokens, Geist).
   One card centred on a warm canvas; the logo's orbit (three rings, one dot each) turns slowly behind it;
   a small "DNS answer" line under the card. Its own design - not DBOrbit's split sign-in page. */

body.dno-signin {
    position: relative;
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background: #fffaf4;
    color: var(--dno-text);
    font-family: var(--dno-font);
}

/* canvas */
.dno-si-canvas { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.dno-si-glow {
    position: absolute;
    left: 50%;
    bottom: -38vmax;
    width: 110vmax;
    height: 70vmax;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 140, 26, 0.34), rgba(255, 160, 0, 0.14) 55%, rgba(255, 160, 0, 0) 100%);
}
.dno-si-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(194, 65, 12, 0.16) 1px, transparent 1.2px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
}
.dno-si-orbit {
    position: absolute;
    left: 50%;
    top: 46%;
    border: 1px solid rgba(234, 88, 12, 0.16);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: dno-si-turn 60s linear infinite;
}
.dno-si-orbit span {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6d01, #fea000);
    box-shadow: 0 0 0 5px rgba(255, 122, 0, 0.12), 0 4px 12px rgba(234, 88, 12, 0.35);
}
.dno-si-orbit-1 { width: 560px; height: 560px; animation-duration: 48s; }
.dno-si-orbit-2 { width: 820px; height: 820px; animation-duration: 76s; animation-direction: reverse; border-style: dashed; }
.dno-si-orbit-2 span { top: auto; bottom: -6px; width: 9px; height: 9px; margin-left: -4px; }
.dno-si-orbit-3 { width: 1100px; height: 1100px; animation-duration: 110s; border-color: rgba(234, 88, 12, 0.09); }
.dno-si-orbit-3 span { top: 50%; left: -6px; margin: -6px 0 0; width: 10px; height: 10px; }
@keyframes dno-si-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* card */
.dno-si-main {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 40px 16px 24px;
}
.dno-si-card {
    width: 100%;
    max-width: 408px;
    padding: 32px 32px 26px;
    border: 1px solid rgba(231, 229, 228, 0.9);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 30px 70px -30px rgba(194, 65, 12, 0.35);
}
.dno-si-head { text-align: center; margin-bottom: 22px; }
.dno-si-head .dno-logo { display: block; margin: 0 auto 14px; border-radius: 14px; box-shadow: 0 10px 24px -10px rgba(234, 88, 12, 0.55); filter: none; }
.dno-si-head h1 { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--dno-heading); }
.dno-si-head p { margin: 6px 0 0; font-size: 0.875rem; color: var(--dno-muted); }

.dno-si-card .dno-login-form { display: flex; flex-direction: column; gap: 14px; }
.dno-si-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.dno-si-field > span:first-child { font-size: 0.75rem; font-weight: 500; color: var(--dno-text); }
.dno-si-field input, .dno-si-pass input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--dno-border);
    border-radius: 12px;
    background: #fff;
    color: var(--dno-heading);
    font: inherit;
    font-size: 0.9375rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dno-si-field input:focus, .dno-si-pass input:focus { border-color: #fdba74; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.16); }
.dno-si-pass { position: relative; display: block; }
.dno-si-pass input { padding-right: 46px; }
.dno-si-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--dno-faint);
}
.dno-si-eye:hover { background: #fafaf9; color: var(--dno-text); }
.dno-si-eye .dno-i { width: 17px; height: 17px; }
.dno-si-eye .dno-eye-hide, .dno-si-eye.is-shown .dno-eye-show { display: none; }
.dno-si-eye.is-shown .dno-eye-hide { display: block; }
.dno-si-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.8125rem; color: var(--dno-text); cursor: pointer; }
.dno-si-check input { width: 16px; height: 16px; accent-color: var(--dno-accent); }
.dno-si-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    margin-top: 2px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #f26a0c, #f08a00);
    color: #fff;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    box-shadow: 0 12px 24px -12px rgba(234, 88, 12, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.dno-si-submit:hover { filter: brightness(1.05); }
.dno-si-submit:active { transform: translateY(1px); }
.dno-si-submit:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25); }
.dno-si-submit .dno-i { width: 17px; height: 17px; }
.dno-si-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #fecdd3;
    border-radius: 12px;
    background: #fff1f2;
    color: #be123c;
    font-size: 0.875rem;
}
.dno-si-error .dno-i { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.dno-si-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; font-size: 0.75rem; color: var(--dno-faint); }
.dno-si-or::before, .dno-si-or::after { content: ""; height: 1px; flex: 1; background: var(--dno-border); }
.dno-si-sso { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.dno-si-sso a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    border: 1px solid var(--dno-border);
    border-radius: 12px;
    background: #fff;
    color: var(--dno-heading);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
}
.dno-si-sso a:hover { border-color: #fdba74; background: #fffaf5; }
.dno-si-sso .dno-i, .dno-si-sso i { width: 16px; height: 16px; color: var(--dno-muted); }
.dno-si-link { color: var(--dno-accent-text); font-weight: 500; text-decoration: none; }
.dno-si-link:hover { color: var(--dno-accent); }
.dno-si-center { text-align: center; font-size: 0.8125rem; }
.dno-si-foot { margin: 20px 0 0; text-align: center; font-size: 0.75rem; color: var(--dno-faint); }
.dno-si-note { margin: 0; padding: 12px 14px; border: 1px solid var(--dno-border); border-radius: 12px; font-size: 0.875rem; color: var(--dno-muted); }

/* the live DNS answer under the card */
.dno-si-answer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 8px 14px;
    border: 1px solid rgba(231, 229, 228, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(6px);
    font-size: 0.75rem;
    color: var(--dno-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}
.dno-si-live { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #16a34a; }
.dno-si-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(22, 163, 74, 0.25); animation: dno-si-ping 1.8s ease-out infinite; }
@keyframes dno-si-ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.dno-si-answer-text { overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease; }
.dno-si-answer-text.is-in { opacity: 1; transform: none; }
.dno-si-answer-text b { color: var(--dno-heading); font-weight: 600; }
.dno-si-answer-text span { color: var(--dno-heading); }
.dno-si-answer-text em { font-style: normal; font-weight: 600; color: var(--dno-accent-text); padding: 1px 6px; border-radius: 6px; background: var(--dno-accent-soft); }
.dno-si-answer-text i { font-style: normal; color: var(--dno-faint); }

.dno-si-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 16px 20px;
    font-size: 0.75rem;
    color: var(--dno-faint);
}
.dno-si-footer strong { color: var(--dno-muted); font-weight: 600; }

@media (max-width: 480px) {
    .dno-si-card { padding: 26px 20px 22px; border-radius: 18px; }
    .dno-si-orbit-1 { width: 380px; height: 380px; }
    .dno-si-answer { font-size: 0.6875rem; }
}
@media (prefers-reduced-motion: reduce) {
    .dno-si-orbit, .dno-si-live::after { animation: none; }
}