@charset "utf-8";

/* Shared visual layer. The original 1000px test canvas is preserved because
   the answer pages calculate drag positions from that coordinate system. */
html {
    min-height: 100%;
    background: #eaf3fb;
}

body.system-page {
    min-width: 1024px;
    min-height: 100vh;
    margin: 0;
    color: #18324a;
    background:
        radial-gradient(circle at 12% 8%, rgba(105, 190, 255, .28), transparent 28rem),
        radial-gradient(circle at 88% 92%, rgba(80, 214, 177, .18), transparent 30rem),
        linear-gradient(145deg, #f7fbff 0%, #e9f4fc 48%, #dfeef9 100%);
    background-attachment: fixed;
}

body.system-page form {
    min-height: 100vh;
    padding: 22px 0 30px;
    box-sizing: border-box;
}

/* Centre the canvas without changing its internal geometry. */
body.system-page .wrap,
body.system-page .demowrap {
    margin-right: auto !important;
    margin-left: auto !important;
}

body.system-page #header .wrap,
body.system-page #headernu .wrap {
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 12px 34px rgba(31, 70, 104, .16);
}

body.system-page #content > .wrap,
body.system-page #Div1 > .wrap {
    background-color: #fff;
    box-shadow: 0 18px 45px rgba(31, 70, 104, .18);
}

body.system-page:not(.question-page) #content > .wrap,
body.system-page.end-page #Div1 > .wrap {
    overflow: hidden;
    border-radius: 16px;
}

body.system-page #headernu + #content > .wrap,
body.system-page #header + #content > .wrap {
    border-radius: 0;
}

body.system-page #footer,
body.system-page #footer .wrap1,
body.system-page #footer #cont2 {
    background: none !important;
    background-color: transparent !important;
}

body.system-page #footer .wrap {
    height: 44px;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
}

body.system-page #footer #cont2 {
    height: 44px;
    padding: 7px 8px 0;
    box-sizing: border-box;
}

body.system-page #footer .text {
    display: none;
}

body.system-page #footer .btn {
    float: right;
    width: 100px;
    margin: 0;
    text-align: right;
}

body.system-page input[type="text"],
body.system-page input[type="password"] {
    box-sizing: border-box;
    border: 1px solid #b8cde0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .94);
    box-shadow: inset 0 1px 2px rgba(28, 57, 82, .08);
    transition: border-color .18s ease, box-shadow .18s ease;
}

body.system-page input[type="text"]:focus,
body.system-page input[type="password"]:focus {
    outline: none;
    border-color: #2d87c8;
    box-shadow: 0 0 0 3px rgba(45, 135, 200, .16);
}

body.system-page input[type="image"],
body.system-page a img {
    transition: filter .18s ease, transform .18s ease;
}

body.system-page input[type="image"]:hover,
body.system-page a:hover img {
    filter: brightness(1.04) saturate(1.04);
}

body.system-page input[type="image"]:focus,
body.system-page a:focus img {
    outline: 3px solid rgba(45, 135, 200, .38);
    outline-offset: 3px;
}

body.system-page.entry-page .c_1,
body.system-page.entry-page .c_2 {
    border-radius: 16px;
}

body.system-page .inbox_table marquee {
    border: 1px solid rgba(72, 126, 169, .18);
    border-radius: 8px;
}

/* No overlay, transform, or clipping is applied around drag targets. */
body.system-page.question-page form {
    padding: 0 0 30px;
}

body.system-page.question-page #content > .wrap {
    /* Keep the legacy initial containing block used by absolute drag icons. */
    position: static;
}

body.system-page.question-page .c_2 {
    background-color: #fff;
}

body.system-page.question-page .dragitem,
body.system-page.question-page [class^="dragvarious"],
body.system-page.question-page [class*=" dragvarious"] {
    cursor: grab;
    filter: drop-shadow(0 3px 3px rgba(21, 50, 73, .18));
}

body.system-page.question-page .ui-draggable-dragging {
    z-index: 1000;
    cursor: grabbing;
    filter: drop-shadow(0 7px 7px rgba(21, 50, 73, .28));
}

body.system-page.end-page .c_2 {
    position: relative;
}

body.system-page.end-page .buttonx {
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(36, 116, 74, .24);
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.system-page.end-page .buttonx:hover {
    background-color: #369f3b;
    box-shadow: 0 10px 22px rgba(36, 116, 74, .3);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    body.system-page *,
    body.system-page *::before,
    body.system-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}