:root {
    --bg: #04100c;
    --bg-deep: #020806;
    --card: rgba(9, 29, 23, .86);
    --card-solid: #0a1e18;
    --card-hover: #0e2920;
    --ink: #effbf6;
    --muted: #87a399;
    --line: rgba(133, 213, 184, .16);
    --line-bright: rgba(94, 230, 178, .34);
    --green: #5ee6b2;
    --green-strong: #20c98b;
    --green-soft: rgba(94, 230, 178, .11);
    --gold: #f2c761;
    --red: #ff8276;
    --navy: #071813;
    --shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg-deep); }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: "DM Sans", system-ui, sans-serif;
    background:
        radial-gradient(circle at 10% 5%, rgba(29, 188, 130, .13), transparent 28rem),
        radial-gradient(circle at 95% 35%, rgba(26, 127, 98, .10), transparent 32rem),
        linear-gradient(145deg, #06140f 0%, #020806 68%, #07150f 100%);
}
body::before {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    content: "";
    opacity: .2;
    background-image:
        linear-gradient(rgba(112, 211, 174, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(112, 211, 174, .11) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

a { color: inherit; }
button, input { font: inherit; }
.container { position: relative; z-index: 1; width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 0 max(24px, calc((100vw - 1180px) / 2));
    border-bottom: 1px solid var(--line);
    background: rgba(3, 13, 10, .82);
    backdrop-filter: blur(20px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-family: "Manrope", sans-serif; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.brand > span { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line-bright); border-radius: 50%; color: var(--green); background: var(--green-soft); box-shadow: 0 0 30px rgba(94, 230, 178, .16); }
.topbar nav { display: flex; align-items: center; gap: 17px; }
.nav-link { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; }
.nav-link:hover { color: var(--green); }
.mode { padding: 7px 10px; border: 1px solid var(--line-bright); border-radius: 99px; color: var(--green); background: var(--green-soft); font: 700 .7rem "Manrope", sans-serif; letter-spacing: .12em; }
.user-chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .025); }
.user-chip > i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.user-chip > span { display: grid; line-height: 1.05; }
.user-chip small { color: var(--muted); font-size: .53rem; letter-spacing: .18em; }
.user-chip strong { max-width: 180px; overflow: hidden; color: var(--ink); font-size: .8rem; text-overflow: ellipsis; }
.logout-form { margin: 0; }
.logout-link { padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: .8rem; font-weight: 700; }
.logout-link:hover { color: var(--green); }

main.container { padding-top: 66px; padding-bottom: 52px; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.hero h1 { margin: 7px 0 8px; font: 800 clamp(2.5rem, 6vw, 4.8rem)/.95 "Manrope", sans-serif; letter-spacing: -.065em; }
.hero h1 em { color: var(--green); font-style: normal; text-shadow: 0 0 32px rgba(94, 230, 178, .22); }
.hero p { max-width: 620px; margin: 0; color: var(--muted); font-size: 1.04rem; }
.hero-actions { display: flex; flex-direction: column; align-items: end; gap: 12px; }
.auto-trading-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.auto-trading-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; }
.auto-trading-status.active { color: var(--green); }
.auto-trading-status.active i { opacity: 1; box-shadow: 0 0 8px currentColor; }
.system-line { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--green); font: 700 .65rem "Manrope", sans-serif; letter-spacing: .2em; }
.system-line i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); animation: pulse 2s infinite; }
.eyebrow { display: inline-block; color: var(--muted); font: 700 .67rem "Manrope", sans-serif; letter-spacing: .16em; text-transform: uppercase; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; font-weight: 700; transition: .2s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.button.primary { color: #03100b; background: var(--green); box-shadow: 0 10px 34px rgba(32, 201, 139, .18); }
.button.primary:hover { background: #7df0c4; }
.button.secondary { border-color: var(--line-bright); color: var(--green); background: var(--green-soft); }
.button.secondary:hover { border-color: var(--green); background: rgba(94, 230, 178, .16); }

.recommendation { position: relative; display: grid; grid-template-columns: 1.2fr .45fr .75fr; align-items: center; gap: 28px; margin-bottom: 18px; padding: 30px 32px; overflow: hidden; border: 1px solid var(--line-bright); border-radius: 12px; background: linear-gradient(115deg, rgba(15, 48, 37, .93), rgba(6, 22, 17, .96)); box-shadow: var(--shadow); }
.recommendation::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: var(--signal-color, var(--green)); box-shadow: 0 0 22px var(--signal-color, var(--green)); }
.recommendation::after { position: absolute; top: -110px; left: 26%; width: 280px; height: 280px; border-radius: 50%; content: ""; background: color-mix(in srgb, var(--signal-color, var(--green)) 9%, transparent); filter: blur(16px); }
.recommendation.buy { --signal-color: var(--green); }
.recommendation.sell { --signal-color: var(--red); }
.recommendation.hold { --signal-color: var(--gold); }
.signal, .signal-code, .recommended-amount { position: relative; z-index: 1; }
.signal > span, .recommended-amount > span { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.signal > strong { display: block; margin: 2px 0; color: var(--signal-color); font: 800 clamp(2rem, 5vw, 3.6rem) "Manrope", sans-serif; letter-spacing: -.05em; }
.signal p { margin: 0; color: #a9c1b8; }
.signal-code { padding: 18px 22px; border-right: 1px solid var(--line); border-left: 1px solid var(--line); text-align: center; }
.signal-code small { display: block; color: var(--muted); font-size: .58rem; letter-spacing: .16em; }
.signal-code strong { color: var(--ink); font: 700 1.9rem "Manrope", sans-serif; }
.signal-code strong span { color: var(--muted); font-size: .7rem; }
.recommended-amount { text-align: right; }
.recommended-amount strong { display: block; margin: 5px 0; color: var(--ink); font: 700 clamp(1.25rem, 3vw, 2rem) "Manrope", sans-serif; }
.recommended-amount small { color: var(--muted); }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.metric, .panel { position: relative; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(12, 36, 28, .88), rgba(5, 18, 14, .92)); box-shadow: 0 16px 50px rgba(0, 0, 0, .17); backdrop-filter: blur(10px); }
.metric { min-height: 145px; padding: 25px 23px; overflow: hidden; transition: border-color .2s ease, transform .2s ease; }
.metric:hover { transform: translateY(-2px); border-color: var(--line-bright); }
.metric::after { position: absolute; top: 13px; right: 15px; content: attr(data-seq); color: rgba(94, 230, 178, .25); font: 700 .62rem "Manrope", sans-serif; letter-spacing: .12em; }
.metric > span { display: block; margin-bottom: 17px; color: var(--muted); font-size: .72rem; letter-spacing: .06em; }
.metric > strong { display: block; color: var(--ink); font: 700 clamp(1.25rem, 2.4vw, 1.7rem) "Manrope", sans-serif; letter-spacing: -.035em; }
.metric > small { color: var(--green); font-size: .72rem; }

.content-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; margin-bottom: 14px; }
.panel { padding: 27px; }
.panel::before { position: absolute; top: -1px; left: 27px; width: 54px; height: 1px; content: ""; background: var(--green); box-shadow: 0 0 13px rgba(94, 230, 178, .55); }
.panel h2 { margin: 4px 0 21px; font: 700 1.45rem "Manrope", sans-serif; letter-spacing: -.03em; }
.panel p { color: var(--muted); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.status { padding: 7px 10px; border: 1px solid var(--line-bright); border-radius: 99px; color: var(--green); background: var(--green-soft); font-size: .68rem; font-weight: 700; }
.sync-link { padding: 7px 10px; border: 1px solid var(--line-bright); border-radius: 6px; color: var(--green); background: var(--green-soft); cursor: pointer; font-size: .67rem; font-weight: 700; }
.sync-link:hover { border-color: var(--green); background: rgba(94, 230, 178, .16); }
.indicator { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 0; border-top: 1px solid var(--line); }
.indicator span, .indicator small { display: block; }
.indicator span { color: #dbece5; font-size: .89rem; font-weight: 600; }
.indicator small { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.indicator strong { font: 700 1.05rem "Manrope", sans-serif; }
.stack-form { display: grid; gap: 15px; }
.stack-form label, .trade-form label { display: grid; gap: 7px; color: var(--muted); font-size: .75rem; font-weight: 600; }
input[type="number"], input[type="email"], input[type="password"], select { width: 100%; min-height: 47px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px; outline: none; color: var(--ink); background: rgba(1, 9, 6, .64); transition: border .2s ease, box-shadow .2s ease; }
input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(94, 230, 178, .08); }
.portfolio-values { display: grid; gap: 15px; }
.portfolio-values span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .75rem; font-weight: 600; }
.portfolio-values strong { font: 700 1.15rem "Manrope", sans-serif; }
.portfolio-total { display: flex; align-items: end; justify-content: space-between; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.portfolio-total span { color: var(--muted); font-size: .76rem; }
.portfolio-total strong { font: 700 1.25rem "Manrope", sans-serif; }
.trade-panel { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 48px; margin-bottom: 14px; }
.local-test-panel { border-color: rgba(94, 230, 178, .28); background: linear-gradient(135deg, rgba(12, 46, 35, .94), rgba(5, 18, 14, .92)); }
.trade-panel h2 { margin-bottom: 5px; }
.trade-panel p { margin: 0; font-size: .88rem; }
.trade-panel .validation-mode { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--gold); font-size: .75rem; }
.validation-mode i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(242, 199, 97, .65); }
.trade-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; }
.trade-form .check { grid-column: 1 / -1; display: flex; align-items: center; color: var(--muted); }
input[type="checkbox"] { accent-color: var(--green-strong); }
.orders { margin-bottom: 16px; }
.market-info { margin-bottom: 14px; }
.market-info .indicator strong { text-align: right; }
.market-info .indicator strong small { font-family: "DM Sans", sans-serif; font-weight: 400; }
.market-info .indicator strong.buy { color: var(--green); }
.market-info .indicator strong.sell { color: var(--red); }
.market-info-note { margin: 12px 0 0; font-size: .75rem; }
.muted, .disclaimer { color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 11px; border-top: 1px solid var(--line); text-align: left; font-size: .82rem; }
th { color: var(--muted); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
td { color: #d6e8e1; }
td small { display: block; margin-top: 4px; color: var(--muted); font-size: .66rem; white-space: nowrap; }
.notice { margin-bottom: 18px; padding: 14px 17px; border: 1px solid; border-radius: 7px; }
.notice.success { border-color: rgba(94, 230, 178, .3); color: var(--green); background: var(--green-soft); }
.notice.error, .validation-errors, .field-error { color: var(--red); }
.notice.error { border-color: rgba(255, 130, 118, .3); background: rgba(255, 130, 118, .08); }
.disclaimer { margin: 25px 0 0; text-align: center; font-size: .7rem; }
footer { position: relative; z-index: 1; padding: 22px 0; border-top: 1px solid var(--line); color: var(--muted); background: rgba(1, 7, 5, .62); font-size: .72rem; letter-spacing: .04em; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 900px) {
    .hero { align-items: stretch; flex-direction: column; }
    .hero form { align-self: start; }
    .recommendation { grid-template-columns: 1fr 1fr; }
    .signal { grid-column: 1 / -1; }
    .signal-code { border-left: 0; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .content-grid, .trade-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .container { width: min(100% - 24px, 1180px); }
    .topbar { min-height: 66px; padding: 0 12px; }
    .brand { font-size: .88rem; }
    .brand > span { width: 31px; height: 31px; }
    .nav-link, .mode, .user-chip small { display: none; }
    .user-chip { border: 0; padding: 0; background: transparent; }
    .user-chip strong { max-width: 90px; }
    main.container { padding-top: 38px; }
    .hero { align-items: stretch; flex-direction: column; }
    .hero form .button { width: 100%; }
    .recommendation { grid-template-columns: 1fr; padding: 24px; }
    .signal { grid-column: auto; }
    .signal-code { padding: 15px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }
    .recommended-amount { text-align: left; }
    .metric-grid { grid-template-columns: 1fr; }
    .metric { min-height: 125px; }
    .panel { padding: 23px 20px; }
    .trade-form { grid-template-columns: 1fr; }
    .trade-form .check { grid-column: auto; }
}