:root { --ink:#101828; --muted:#667085; --line:#e6e9ee; --surface:#fff; --soft:#f5f7f9; --navy:#081420; --gold:#f0b90b; --gold-dark:#d9a609; --green:#12b76a; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--soft); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3,.brand { font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; font-weight:600; letter-spacing:-.02em; }
.brand strong { color:var(--gold); }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(240,185,11,.55); border-radius:11px; color:var(--gold); font-weight:800; }
.eyebrow { display:block; color:var(--gold-dark); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:13px; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(360px, .9fr) minmax(520px, 1.1fr); }
.brand-panel { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px 56px; color:#fff; background:linear-gradient(145deg,#07111c,#0d2631); }
.brand-message { position:relative; z-index:1; max-width:520px; margin:auto 0; }
.brand-message h1 { font-size:clamp(42px,5vw,68px); line-height:1.04; letter-spacing:-.055em; margin-bottom:24px; }
.brand-message p { max-width:440px; color:#aab6c1; font-size:18px; line-height:1.7; }
.ambient { position:absolute; border-radius:999px; filter:blur(4px); opacity:.18; }
.ambient-one { width:430px;height:430px;right:-200px;top:14%;border:80px solid var(--gold); }
.ambient-two { width:200px;height:200px;left:-70px;bottom:-70px;background:#1c6d6b; }
.form-panel { display:grid; place-items:center; padding:48px; background:#fff; }
.form-wrap { width:100%; max-width:430px; }
.form-wrap h2 { font-size:32px; letter-spacing:-.035em; margin-bottom:12px; }
.subtext { color:var(--muted); line-height:1.6; margin-bottom:30px; }
.auth-form { display:flex; flex-direction:column; }
.auth-form label { font-size:14px; font-weight:600; margin:17px 0 8px; }
.auth-form input { width:100%; height:50px; border:1px solid #d8dde5; border-radius:10px; padding:0 14px; font:inherit; outline:none; transition:.2s; }
.auth-form input:focus { border-color:var(--gold-dark); box-shadow:0 0 0 4px rgba(240,185,11,.12); }
.hint { color:var(--muted); font-size:12px; margin-top:7px; }
.auth-form button { display:flex; justify-content:space-between; align-items:center; height:52px; margin-top:26px; padding:0 18px; border:0; border-radius:10px; background:var(--gold); color:#161616; font:700 15px Inter,ui-sans-serif,sans-serif; cursor:pointer; }
.auth-form button:hover { background:#f8c51c; }
.alert { padding:12px 14px; border:1px solid #fecdca; border-radius:9px; background:#fef3f2; color:#b42318; font-size:14px; }
.security-note { margin-top:22px; color:#98a2b3; font-size:12px; text-align:center; }
.security-note span { color:var(--green); }
.dashboard-page { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; width:250px; padding:28px 22px; display:flex; flex-direction:column; color:#eaf0f5; background:var(--navy); }
.sidebar nav { margin-top:54px; }
.nav-link { display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:9px; color:#a9b4be; text-decoration:none; font-size:14px; }
.nav-link.active { color:#fff; background:rgba(255,255,255,.08); }
.sidebar-footer { margin-top:auto; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:11px; }
.sidebar-footer small { display:block; color:#84919c; margin-top:3px; }
.avatar { display:grid; place-items:center; width:38px;height:38px;border-radius:10px;background:var(--gold);color:#191919;font-weight:800; }
.dashboard-main { margin-left:250px; min-height:100vh; padding:44px clamp(28px,5vw,76px); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:40px; }
.topbar h1 { margin:0; font-size:30px; letter-spacing:-.035em; }
.ghost-button { border:1px solid #d8dde5; border-radius:9px; padding:10px 15px; background:#fff; color:#344054; font:600 14px Inter,ui-sans-serif,sans-serif; cursor:pointer; }
.hero-card { position:relative; overflow:hidden; min-height:245px; padding:42px; display:flex; justify-content:space-between; align-items:center; border-radius:22px; color:#fff; background:linear-gradient(120deg,#0b1b27,#12383e); box-shadow:0 18px 45px rgba(15,35,48,.12); }
.hero-card > div:first-child { position:relative; z-index:1; max-width:620px; }
.hero-card h2 { font-size:34px; margin:25px 0 12px; letter-spacing:-.04em; }
.hero-card p { color:#b6c1c8; line-height:1.7; margin:0; }
.status { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:99px; color:#c7f7dc; background:rgba(18,183,106,.12); font-size:12px; font-weight:700; }
.status i { width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(18,183,106,.13); }
.hero-symbol { display:grid; place-items:center; width:140px;height:140px;border:1px solid rgba(240,185,11,.35);border-radius:40px;transform:rotate(12deg);color:var(--gold);font:800 64px Inter,ui-sans-serif,sans-serif;background:rgba(240,185,11,.05); }
.dashboard-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:22px; }
.info-card { min-height:180px; padding:25px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.card-icon { display:grid;place-items:center;width:38px;height:38px;margin-bottom:25px;border-radius:10px;background:#fff8dd;color:#a87900;font-weight:800; }
.info-card small { color:var(--muted); }
.info-card h3 { margin:5px 0 9px; font-size:19px; }
.info-card p { color:var(--muted); font-size:14px; line-height:1.55; margin:0; }
.simple-page { display:grid;place-items:center;text-align:center;min-height:100vh; }
.simple-page main { padding:40px; }.simple-page h1 { font-size:42px; }.simple-page p { color:var(--muted); }
.primary-link { display:inline-block;margin-top:15px;padding:12px 18px;border-radius:9px;background:var(--gold);color:#171717;text-decoration:none;font-weight:700; }
.button-link { display:inline-block;text-decoration:none; }
.page-description { color:var(--muted);margin:8px 0 0; }
.settings-main { max-width:1250px; }
.notice { margin-bottom:20px;padding:13px 16px;border-radius:10px;font-size:14px; }
.success-notice { color:#067647;background:#ecfdf3;border:1px solid #abefc6; }
.error-notice { color:#b42318;background:#fef3f2;border:1px solid #fecdca; }
.safety-banner { display:flex;gap:12px;align-items:center;margin-bottom:20px;padding:16px 18px;border:1px solid #b2ddff;border-radius:12px;background:#eff8ff;color:#175cd3;font-size:14px; }
.safety-banner span { color:#475467; }
.integration-form { display:grid;gap:20px; }
.integration-card { padding:28px;border:1px solid var(--line);border-radius:17px;background:#fff; }
.integration-heading { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;margin-bottom:25px; }
.integration-heading h2,.test-panel h2 { margin:0 0 5px;font-size:19px; }
.integration-heading p,.test-panel p { margin:0;color:var(--muted);font-size:14px; }
.service-icon { display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font-weight:800; }
.openai-icon { background:#e8f5f0;color:#08735c; }.binance-icon { background:#fff7d6;color:#9c7300; }
.connection-badge { padding:6px 9px;border-radius:99px;background:#f2f4f7;color:#667085;font-size:11px;font-weight:700; }
.connection-badge.connected { color:#067647;background:#ecfdf3; }
.integration-card label { display:block;margin:14px 0 8px;font-size:13px;font-weight:700; }
.integration-card input { width:100%;height:48px;padding:0 14px;border:1px solid #d8dde5;border-radius:9px;font:inherit;outline:none; }
.integration-card input:focus { border-color:var(--gold-dark);box-shadow:0 0 0 4px rgba(240,185,11,.12); }
.integration-card small { display:block;margin-top:8px;color:#98a2b3; }
.field-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.settings-actions { display:flex;justify-content:flex-end; }
.primary-button { padding:12px 18px;border:0;border-radius:9px;background:var(--gold);color:#171717;font:700 14px Inter,ui-sans-serif,sans-serif;cursor:pointer; }
.test-panel { display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:28px;padding:24px 28px;border:1px solid var(--line);border-radius:16px;background:#fff; }
.test-actions { display:flex;gap:10px; }.test-actions form { margin:0; }
.card-link { color:#7a5a00;text-decoration:none;font-weight:600; }.card-link:hover { text-decoration:underline; }
@media (max-width:900px) { .auth-shell { grid-template-columns:1fr; }.brand-panel { min-height:280px;padding:32px; }.brand-message { margin:60px 0 10px; }.brand-message h1 { font-size:40px; }.form-panel { padding:45px 24px; }.sidebar { position:static;width:auto;height:auto;padding:20px 24px;flex-direction:row;align-items:center;justify-content:space-between; }.sidebar nav,.sidebar-footer { display:none; }.dashboard-main { margin-left:0;padding:30px 22px; }.dashboard-grid { grid-template-columns:1fr; }.hero-symbol { display:none; } }
@media (max-width:560px) { .topbar { align-items:flex-start; }.topbar h1 { font-size:25px; }.hero-card { padding:30px 24px; }.hero-card h2 { font-size:28px; }.brand-panel { min-height:240px; }.brand-message p { display:none; }.field-grid { grid-template-columns:1fr; }.integration-heading { grid-template-columns:auto 1fr; }.connection-badge { grid-column:1 / -1;width:max-content; }.safety-banner,.test-panel { align-items:flex-start;flex-direction:column; }.test-actions { flex-wrap:wrap; } }