:root {

    font-family: Arial, Helvetica, sans-serif;

    color: #111827;

    background: #ffffff;

}



*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; font-family: Arial, Helvetica, sans-serif; }

button, input, select, textarea, table { font-family: Arial, Helvetica, sans-serif; }

img, table { max-width: 100%; }



.tradetool-header {

    margin: 4px;

    padding: 14px 16px;

    text-align: center;

    background: #9271e8;

}

.tradetool-header__title { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1; }

.tradetool-header__subtitle { margin-top: 8px; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 700; }

.tradetool-footer { margin: 8px 4px 0; padding: 14px; text-align: center; background: #9271e8; font-size: .78rem; }

.tradetool-footer p { margin: 0; padding: 10px 0; border-block: 1px solid rgba(255,255,255,.8); }



.tradetool-nav-button {

    width: min(100%, 310px);

    min-height: 48px;

    padding: 9px 12px;

    border: 1px solid #8b95a5;

    border-radius: 5px;

    background: #f8fafc;

    color: #111827;

    cursor: pointer;

    font-size: 1rem;

    font-weight: 700;

}

.tradetool-nav-button:hover { background: #eef2ff; border-color: #6246c9; }

.tradetool-nav-button[aria-current="page"] { background: #e9ddff; border: 2px solid #6d45c8; color: #4b1da1; }

.tradetool-nav-button--danger { background: #dc3545; color: #fff; border-color: #b02a37; }



@media (max-width: 820px) {

    body > center, body > table, body > p > table { width: 100% !important; }

    table { overflow-wrap: anywhere; }

    button { max-width: 100%; }

    .tradetool-header { margin: 0; }

}



@media (prefers-reduced-motion: reduce) {

    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }

}

/* KONF26-08: responsive, keyboard-accessible application shell. */
body { min-width: 320px; background: #f5f6fa; }

.tradetool-skip-link {
    position: fixed;
    z-index: 1000;
    top: 8px;
    left: 8px;
    transform: translateY(-180%);
    padding: 10px 14px;
    border-radius: 4px;
    background: #111827;
    color: #fff;
    font-weight: 700;
}

.tradetool-skip-link:focus { transform: translateY(0); }
.tradetool-app-shell { margin: 0 4px; border: 1px solid #707070; background: #fff; }
.tradetool-userbar { padding: 10px 18px; border-bottom: 1px solid #707070; text-align: center; }
.tradetool-userbar h1 { margin: 0; color: #2511b5; font-size: clamp(1.5rem, 3vw, 2rem); }
.tradetool-userbar p { margin: 6px 0 0; color: #2511b5; font-weight: 700; overflow-wrap: anywhere; }
.tradetool-layout { display: grid; grid-template-columns: minmax(250px, 290px) minmax(0, 1fr); align-items: start; }
.tradetool-sidebar { min-width: 0; padding: 10px; border-right: 1px solid #707070; text-align: center; }
.tradetool-sidebar > h2 { margin: 0 0 12px; color: #2511b5; font-size: 1.35rem; text-decoration: underline; }
.tradetool-main { min-width: 0; padding: 16px; outline: none; }
.tradetool-main__content { width: 100%; overflow-x: auto; }
.tradetool-navigation__form { display: grid; gap: 10px; justify-items: stretch; }
.tradetool-navigation__single-form { display: flex; justify-content: center; margin: 12px 0; }
.tradetool-footer { color: #111827; }
.tradetool-nav-button { width: 100%; min-height: 52px; }
.tradetool-nav-button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.tradetool-nav-button[aria-current="page"] {
    background: #e9ddff;
    border: 2px solid #6d45c8;
    color: #4b1da1;
    box-shadow: inset 5px 0 0 #6d45c8;
}
.tradetool-nav-button--logout { background: #fff2f2; border-color: #dc3545; color: #9b1c2b; }

@media (max-width: 900px) {
    .tradetool-app-shell { margin: 0; border-inline: 0; }
    .tradetool-layout { grid-template-columns: 1fr; }
    .tradetool-sidebar { border-right: 0; border-bottom: 1px solid #707070; }
    .tradetool-navigation__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tradetool-main { padding: 12px; }
    .tradetool-footer { margin-inline: 0; }
}

@media (max-width: 560px) {
    .tradetool-navigation__form { grid-template-columns: 1fr; }
    .tradetool-userbar { padding-inline: 10px; }
    .tradetool-main { padding: 10px 6px; }
}