* { box-sizing: border-box }
body { margin: 0; background: #0b1421; color: #edf4ff; font: 16px system-ui }
main { max-width: 850px; margin: auto; padding: 24px 16px }
header, #status { color: #a4ceff }
section { background: #16253a; border: 1px solid #344b68; border-radius: 16px; padding: 20px; margin: 16px 0 }
label { display: block; margin: 8px 0; min-width: 0 }
input, button { font: inherit; border-radius: 8px; padding: 10px; min-height: 44px }
input { display: block; width: 100%; margin-top: 5px; background: #0b1421; color: #edf4ff; border: 1px solid #56708e }
button { background: #a4ceff; color: #10243d; border: 0; margin: 5px 5px 0 0; cursor: pointer }
button:disabled { opacity: .55; cursor: default }
.category { display: grid; grid-template-columns: 2fr 1fr 1fr auto; align-items: end; gap: 10px; border-top: 1px solid #344b68; margin-top: 8px }
.category button, .category output { margin-bottom: 8px }
@media (max-width: 600px) { .category { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

header a, header a:visited { color: #a4ceff }
.secret-field { position: relative; display: block; margin-top: 5px }
.secret-field input { margin: 0; padding-right: 52px }
.secret-field .secret-eye {
    position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 44px; min-height: 44px;
    margin: 0; padding: 0; background: transparent; color: #a4ceff;
}
.secret-eye:focus-visible { outline: 2px solid #a4ceff; outline-offset: -3px }
.secret-eye .eye-slash { display: none }
.secret-eye.is-visible .eye-slash { display: block }

#protection-hint {
    position: fixed; right: 16px; bottom: 16px; z-index: 10;
    width: min(360px, calc(100% - 32px)); padding: 16px;
    background: #16253a; color: #edf4ff;
    border: 1px solid #56708e; border-radius: 12px;
    box-shadow: 0 6px 24px #0005;
}
#protection-hint p { margin: 8px 0; line-height: 1.5 }

input.remember-device{
    display:inline-block;width:auto;min-height:0;
    margin:0 6px 0 0;vertical-align:middle
}

/* compound-form-controls */
#compound-payments {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #56708e;
    border-radius: 8px;
    background: #0b1421;
    color: #edf4ff;
    font: inherit;
    resize: vertical;
}
#compound-form label:has(> #compound-reinvest) {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
}
#compound-reinvest {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 18px;
    accent-color: #a4ceff;
}

/* Навигация «Финансы 1.0» */
[hidden] { display: none !important }
main { max-width: 1160px }
#finance-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 14px;
}
#finance-nav button, .finance-session-actions button {
    background: #16253a;
    border: 1px solid #56708e;
    color: #dbeaff;
}
#finance-nav button { margin: 0; line-height: 1.3 }
#finance-nav button[aria-pressed="true"] {
    background: #a4ceff;
    border-color: #a4ceff;
    color: #10243d;
}
#finance-nav button:focus-visible, .finance-session-actions button:focus-visible {
    outline: 2px solid #a4ceff;
    outline-offset: 3px;
}
#market-kind, #dividend-position {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 5px;
    padding: 9px 10px;
    border: 1px solid #56708e;
    border-radius: 8px;
    background: #0b1421;
    color: #edf4ff;
    color-scheme: dark;
    font: inherit;
}
.finance-session-actions { display: flex; flex-wrap: wrap; gap: 8px }
.finance-session-actions button { margin: 0 }
@media (max-width: 620px) {
    #finance-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    main > section { padding: 14px }
}