/* Alovate palette. Light and dark are both first-class: the theme comes from data-theme on , falling back to the OS preference when unset. The brand is a gradient, so it exists twice — a solid for text and borders, and the gradient itself for filled surfaces. */ :root { --brand: #6b6eff; --brand-2: #9597f6; --brand-grad: linear-gradient(135deg, #6b6eff 0%, #9597f6 100%); --on-brand: #ffffff; --up: #12b76a; --down: #e5484d; --radius: 10px; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; /* light surfaces */ --bg: #ffffff; --surface: #f7f8fa; --surface-2: #eef0f4; --surface-3: #e3e6ec; --border: #dfe3ea; --text: #12141a; --hint: #6b7280; --shadow: 0 8px 24px rgb(16 20 32 / .12); --brand-soft: rgba(107,110,255,.12); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e1015; --surface: #171a21; --surface-2: #1e222b; --surface-3: #272c37; --border: #2c313c; --text: #e9ecf1; --hint: #8b93a1; --shadow: 0 8px 24px rgb(0 0 0 / .5); --brand-soft: rgba(107,110,255,.20); --up: #2ee08a; --down: #ff5f66; } } :root[data-theme="dark"] { --bg: #0e1015; --surface: #171a21; --surface-2: #1e222b; --surface-3: #272c37; --border: #2c313c; --text: #e9ecf1; --hint: #8b93a1; --shadow: 0 8px 24px rgb(0 0 0 / .5); --brand-soft: rgba(107,110,255,.20); --up: #2ee08a; --down: #ff5f66; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; padding-bottom: calc(60px + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; } body.no-nav { padding-bottom: env(safe-area-inset-bottom); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .up { color: var(--up); } .down { color: var(--down); } a { color: var(--brand); } /* ── header ── */ header { padding: 12px 14px 10px; position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); } .head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .brand { display: flex; align-items: center; gap: 8px; } .brand-mark { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; background: var(--brand-grad); color: var(--on-brand); border-radius: 5px; font-weight: 800; font-size: 13px; } h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .live { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--hint); text-transform: uppercase; letter-spacing: .05em; } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hint); } .live.on { color: var(--up); } .live.on .dot { background: var(--up); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } } @media (prefers-reduced-motion: reduce) { .live.on .dot { animation: none } } /* ── bottom nav ── */ .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--surface); border-top: 1px solid var(--border); padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); } .tab { flex: 1; padding: 6px 3px; border: 0; border-radius: 8px; background: transparent; color: var(--hint); font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; } .tab svg { width: 18px; height: 18px; stroke-width: 1.9; } .tab.is-active { color: var(--brand); } main { padding: 12px 14px 18px; } .panel { display: none; } .panel.is-active { display: block; } /* ── controls ── */ input, select, button, textarea { font: inherit; } input, select { width: 100%; border-radius: 8px; padding: 10px 11px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); } input::placeholder { color: var(--hint); } input:focus-visible, select:focus-visible { outline: none; border-color: var(--brand); } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--hint) 50%), linear-gradient(135deg, var(--hint) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; } button { border-radius: 8px; padding: 10px 14px; border: 0; background: var(--brand-grad); color: var(--on-brand); font-weight: 600; cursor: pointer; white-space: nowrap; } button:hover { filter: brightness(1.08); } button:disabled { opacity: .4; cursor: default; } button.ghost { background: var(--surface-3); color: var(--text); } button.ghost:hover { background: var(--border); } button.link { background: transparent; color: var(--hint); padding: 8px 4px; font-weight: 500; } label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--hint); font-weight: 600; } label input, label select { color: var(--text); font-size: 14px; font-weight: 400; } .field-row { display: flex; gap: 8px; flex-wrap: wrap; } /* min-width:0 lets a flex item shrink below its content. Without it a native control with a large intrinsic width — an iOS time picker, for one — pushes the row wider than the screen instead of shrinking. */ .field-row > label { flex: 1 1 45%; min-width: 0; } /* iOS and the Telegram WebView give date/time inputs an intrinsic width that ignores the flex basis, so constrain them explicitly. */ input[type="time"], input[type="date"], input[type="number"] { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; } input[type="time"] { padding-inline: 9px; } /* Below this the two quiet-hour fields stop fitting side by side at all. */ @media (max-width: 359px) { .field-row > label { flex-basis: 100%; } } .check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--text); font-weight: 500; } .check input { width: 16px; height: 16px; padding: 0; accent-color: var(--brand); } .row-form { display: flex; gap: 7px; margin-bottom: 12px; } .row-form input { flex: 1; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px; margin-bottom: 11px; } form.card, .card > form { display: flex; flex-direction: column; gap: 11px; } summary { cursor: pointer; font-weight: 600; color: var(--brand); list-style: none; font-size: 13.5px; } summary::-webkit-details-marker { display: none; } details[open] summary { margin-bottom: 11px; } .hint { margin: -4px 0 0; font-size: 11px; color: var(--hint); line-height: 1.45; } .error { margin: 0; font-size: 12.5px; color: var(--down); } .saved { font-size: 12.5px; color: var(--up); text-align: center; } .section-title { font-size: 11px; font-weight: 700; color: var(--hint); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 8px; } /* ── market rows ── */ .list { display: flex; flex-direction: column; gap: 1px; } .row { display: grid; grid-template-columns: 1fr 56px auto 26px; align-items: center; gap: 10px; background: var(--surface); padding: 10px 12px; cursor: pointer; border-inline-start: 2px solid transparent; } .row:first-child { border-radius: var(--radius) var(--radius) 0 0; } .row:last-child { border-radius: 0 0 var(--radius) var(--radius); } .row:only-child { border-radius: var(--radius); } .row:hover { background: var(--surface-2); border-inline-start-color: var(--brand); } .row-id { min-width: 0; } .sym { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; } .sub { font-size: 11px; color: var(--hint); margin-top: 1px; } .spark { width: 56px; height: 24px; display: block; } .px { text-align: end; } .px b { display: block; font-weight: 600; font-size: 13.5px; } .chg { font-size: 11.5px; font-weight: 600; } .px b.flash-up { animation: fu .55s ease-out; } .px b.flash-down { animation: fd .55s ease-out; } @keyframes fu { 0% { color: var(--up) } 100% { color: inherit } } @keyframes fd { 0% { color: var(--down) } 100% { color: inherit } } .badge { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 5px; border-radius: 3px; background: var(--surface-3); color: var(--hint); } .badge.pre, .badge.post { background: var(--brand-soft); color: var(--brand); } .x { background: transparent; color: var(--hint); border: 0; font-size: 17px; line-height: 1; padding: 2px 4px; } .x:hover { color: var(--down); background: transparent; } /* ── alerts ── */ .alert-row { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 12px; } .alert-main { flex: 1; min-width: 0; } .alert-title { font-weight: 600; font-size: 13.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .cond { display: block; font-size: 12px; color: var(--hint); margin-top: 3px; } .logic { font-size: 9.5px; font-weight: 700; color: var(--brand); letter-spacing: .06em; } .cond-list { display: flex; flex-direction: column; gap: 8px; } .cond-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; position: relative; } .cond-item .x { position: absolute; top: 4px; inset-inline-end: 4px; } .cond-num { font-size: 9.5px; font-weight: 700; color: var(--hint); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 7px; } /* ── chips (onboarding + templates) ── */ .chips { display: flex; flex-wrap: wrap; gap: 7px; } .chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; } .chip:hover { background: var(--surface-3); } .chip.on { background: var(--brand-grad); border-color: transparent; color: var(--on-brand); } .tpl-grid { display: flex; flex-direction: column; gap: 8px; } .tpl { display: flex; gap: 11px; align-items: flex-start; text-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; cursor: pointer; color: var(--text); font-weight: 400; width: 100%; /* Undo the global button `nowrap` — this one holds a wrapping description. */ white-space: normal; } .tpl:hover { background: var(--surface-2); border-color: var(--brand); } .tpl.on { border-color: var(--brand); background: var(--surface-2); } .tpl-icon { font-size: 19px; line-height: 1.1; flex: 0 0 auto; } /* The text column must be a block context, or name and blurb flow inline and overrun the card instead of stacking. */ .tpl > span:last-child { flex: 1; min-width: 0; } .tpl-name { display: block; font-weight: 600; font-size: 13.5px; } .tpl-blurb { display: block; font-size: 11.5px; color: var(--hint); margin-top: 3px; line-height: 1.4; } /* ── activity ── */ .event { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 12px; } .event-time { font-size: 10.5px; color: var(--hint); margin-top: 5px; } .event-text { font-size: 13px; white-space: pre-wrap; line-height: 1.45; } /* ── detail sheet with TradingView ── */ .sheet { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow-y: auto; padding: 14px 14px calc(20px + env(safe-area-inset-bottom)); } .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .sheet-price { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; } .sheet-chg { font-size: 13px; font-weight: 600; } .tv-wrap { height: 380px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .tv-wrap > div { height: 100%; } .chart-msg { text-align: center; color: var(--hint); font-size: 12.5px; padding: 160px 12px; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 11px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; } .stat-k { font-size: 10px; color: var(--hint); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .stat-v { font-size: 14px; font-weight: 600; margin-top: 3px; } /* ── full-screen flows (link + onboarding) ── */ .flow { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; padding: 32px 20px calc(24px + env(safe-area-inset-bottom)); } .flow-inner { max-width: 420px; margin: 0 auto; } .flow h2 { font-size: 21px; font-weight: 650; margin: 0 0 8px; letter-spacing: -0.02em; } .flow p.lead { color: var(--hint); font-size: 13.5px; line-height: 1.55; margin: 0 0 20px; } .flow-logo { width: 46px; height: 46px; border-radius: 11px; background: var(--brand-grad); color: var(--on-brand); display: grid; place-items: center; font-size: 24px; font-weight: 800; margin-bottom: 18px; } .steps { display: flex; gap: 5px; margin-bottom: 22px; } .step-pip { height: 3px; flex: 1; border-radius: 2px; background: var(--surface-3); } .step-pip.done { background: var(--brand-grad); } .flow-actions { display: flex; gap: 9px; margin-top: 22px; } .flow-actions button { flex: 1; } .code-input { text-align: center; font-family: var(--mono); font-size: 24px; letter-spacing: .28em; text-transform: uppercase; padding: 14px 10px; } .empty { text-align: center; color: var(--hint); padding: 36px 16px; font-size: 13px; line-height: 1.6; } .skeleton { background: var(--surface); border-radius: var(--radius); height: 52px; animation: sk 1.3s ease-in-out infinite; } @keyframes sk { 0%,100% { opacity: .5 } 50% { opacity: .2 } } /* ── symbol autocomplete ── */ .ac-wrap { position: relative; } .ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; max-height: 264px; overflow-y: auto; box-shadow: var(--shadow); } .ac-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; cursor: pointer; border-bottom: 1px solid var(--border); } .ac-item:last-child { border-bottom: 0; } .ac-item:hover, .ac-item.active { background: var(--surface-3); } .ac-sym { font-weight: 650; font-size: 13.5px; min-width: 56px; } .ac-name { flex: 1; min-width: 0; font-size: 11.5px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-mkt { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 5px; border-radius: 3px; background: var(--surface-3); color: var(--hint); } .ac-mkt.crypto { background: var(--brand-soft); color: var(--brand); } .ac-empty { padding: 11px; font-size: 12px; color: var(--hint); text-align: center; } /* ── strategy cards ── */ .strat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .strat + .strat { margin-top: 8px; } .strat.open { border-color: var(--brand); } .strat-head { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px; background: transparent; color: var(--text); border: 0; cursor: pointer; text-align: start; white-space: normal; font-weight: 400; } .strat-head:hover { background: var(--surface-2); } .strat-icon { font-size: 19px; flex: 0 0 auto; } .strat-id { flex: 1; min-width: 0; } .strat-name { font-weight: 650; font-size: 14px; display: block; } .strat-meta { font-size: 11px; color: var(--hint); margin-top: 2px; display: block; } .strat-caret { color: var(--hint); font-size: 12px; transition: transform .18s ease; } .strat.open .strat-caret { transform: rotate(90deg); } .strat-body { padding: 0 13px 13px; display: flex; flex-direction: column; gap: 11px; } .strat-block { font-size: 12.5px; line-height: 1.5; } .strat-label { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hint); margin-bottom: 3px; } .strat-signal { background: var(--surface-2); border-inline-start: 2px solid var(--brand); padding: 9px 11px; border-radius: 0 7px 7px 0; font-size: 12.5px; } .strat-caution { background: color-mix(in srgb, var(--down) 10%, transparent); border-inline-start: 2px solid var(--down); padding: 9px 11px; border-radius: 0 7px 7px 0; font-size: 12px; color: var(--text); } .strat-apply { display: flex; gap: 7px; align-items: flex-end; } .strat-apply .ac-wrap { flex: 1; } .strat-msg { font-size: 11.5px; color: var(--hint); margin: 0; } .disclaimer { font-size: 11px; color: var(--hint); line-height: 1.5; border: 1px dashed var(--border); border-radius: 9px; padding: 10px 12px; margin-bottom: 12px; } /* ── RTL ── */ [dir="rtl"] .strat-caret { transform: scaleX(-1); } [dir="rtl"] .strat.open .strat-caret { transform: scaleX(-1) rotate(90deg); } [dir="rtl"] .strat-signal, [dir="rtl"] .strat-caution { border-radius: 7px 0 0 7px; } [dir="rtl"] .code-input { direction: ltr; } /* Prices and timestamps must keep left-to-right character order in a Hebrew layout — but `direction: ltr` also resets text-align to left, so put the alignment back explicitly or they drift away from the Hebrew text. `.sym` is deliberately absent: a Latin ticker already renders LTR under the bidi algorithm, and forcing direction there broke the row's flex order. */ [dir="rtl"] .num, [dir="rtl"] .ac-sym, [dir="rtl"] .sheet-price, [dir="rtl"] .event-time { direction: ltr; unicode-bidi: isolate; text-align: right; } /* Alert text is mixed content whose language varies. `plaintext` resolves each line from its own first strong character, which stops signs and brackets in "(+2.46%)" being flung to the wrong end by the surrounding RTL paragraph. */ [dir="rtl"] .event-text, [dir="rtl"] .cond, [dir="rtl"] .alert-title { unicode-bidi: plaintext; } /* ── alerts grouped by symbol ── */ .agroup { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .agroup + .agroup { margin-top: 8px; } .agroup.open { border-color: var(--brand); } .agroup-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 13px; background: transparent; color: var(--text); border: 0; cursor: pointer; text-align: start; white-space: normal; font-weight: 400; } .agroup-head:hover { background: var(--surface-2); } .agroup-id { flex: 1; min-width: 0; } .agroup-sub { display: block; font-size: 11.5px; color: var(--hint); margin-top: 2px; } .agroup.open .strat-caret { transform: rotate(90deg); } .agroup-body { padding: 0 9px 9px; display: flex; flex-direction: column; gap: 6px; } .agroup-body .alert-row { background: var(--surface-2); }