/* ==========================================================================
   AI INDICATOR LAB — Dashboard / app shell
   Extends style.css tokens. Loaded on app.html, history.html, journal.html
   ========================================================================== */

.app-body{ overflow:hidden; height:100vh; }
.app-body::before{ opacity:0.6; }

.app-shell{
  display:grid;
  grid-template-columns:240px 1fr;
  height:100vh;
}

/* --- sidebar --- */

.app-sidebar{
  background:linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border-right:1px solid var(--line);
  padding:var(--space-3);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}

.app-brand{ padding:0 4px; }

.app-nav-links{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.app-nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0.7rem 0.8rem;
  min-height:44px; /* tap target floor - was ~40px */
  border-radius:var(--radius-s);
  font-size:0.9rem;
  color:var(--text-1);
  transition:background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.app-nav-link svg{ flex-shrink:0; opacity:0.8; }
.app-nav-link:hover{ background:rgba(255,255,255,0.04); color:var(--text-0); }
.app-nav-link.active{
  background:var(--grad-soft);
  color:var(--text-0);
  border:1px solid rgba(139,92,246,0.3);
  box-shadow:0 4px 16px -6px rgba(139,92,246,0.35);
}
.app-nav-link.muted{ color:var(--text-2); font-size:0.85rem; }

.app-sidebar-foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top:var(--space-3);
  border-top:1px solid var(--line-soft);
}

.app-plan-pill{
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--cyan);
  border:1px solid rgba(34,211,238,0.35);
  background:rgba(34,211,238,0.08);
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:6px;
}
.app-plan-pill-warn{
  color:var(--red);
  border-color:rgba(248,113,113,0.4);
  background:rgba(248,113,113,0.1);
}

/* Sits under the plan pill, filling left-to-right with messages used
   this month. Previously the only signal a user got was the pill text
   itself, and the pill only turned red once the limit was already hit
   (see .app-plan-pill-warn above, at 100%) - by then the chat has
   already started rejecting messages with a 429. This bar gives an
   earlier, ambient signal via width and color alone, no separate
   copy to read. See renderUsage in js/app.js for the width/color logic
   (amber from 80%, red from 100%). */
.app-usage-bar{
  height:4px;
  border-radius:999px;
  background:var(--bg-1);
  overflow:hidden;
  margin-bottom:var(--space-3);
}
.app-usage-bar-fill{
  height:100%;
  border-radius:999px;
  background:var(--cyan);
  transition:width 0.2s ease, background 0.2s ease;
}
.app-usage-bar-fill.warn{ background:#fbbf24; }
.app-usage-bar-fill.critical{ background:var(--red); }

/* --- content area --- */

.app-content{
  overflow-y:auto;
  padding:var(--space-4) var(--space-4) var(--space-5);
}

.app-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:var(--space-4);
  flex-wrap:wrap;
  gap:var(--space-2);
}
.app-topbar h1{ font-size:1.6rem; margin-top:6px; }
.app-topbar-actions{ display:flex; align-items:center; gap:14px; }
/* Standalone status pill for the topbar (previously reused .ic-badge,
   which is position:absolute for its card-corner use on the marketing
   hero/workspace preview — pinning this badge to the viewport corner
   instead of sitting inline in the topbar). Colors match .ic-badge's
   green/red treatment so it still reads as the same design language. */
.app-status{
  display:inline-block;
  background:rgba(52,211,153,0.12);
  border:1px solid rgba(52,211,153,0.35);
  color:var(--green);
  font-family:var(--font-mono);
  font-size:0.72rem;
  padding:5px 12px;
  border-radius:999px;
}

.app-sidebar-toggle{
  display:none;
  background:none; border:1px solid var(--line);
  border-radius:8px;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  color:var(--text-0);
  flex-shrink:0;
}

.app-sidebar-overlay{
  position:fixed; inset:0; z-index:39;
  background:rgba(0,0,0,0.5);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.2s ease, visibility 0.2s ease;
}

@media (max-width:960px){
  .app-shell{ grid-template-columns:1fr; }
  .app-sidebar{
    position:fixed; z-index:40; inset:0 auto 0 0; width:220px;
    transform:translateX(-100%);
    transition:transform 0.2s ease;
  }
  .app-sidebar.open{ transform:translateX(0); }
  .app-sidebar-overlay.open{ opacity:1; visibility:visible; }
  .app-sidebar-toggle{ display:flex; }
  .app-body{ overflow:auto; height:auto; }
}

/* ==========================================================================
   Overview stat cards (dashboard home: plan, credits, recent creations)
   ========================================================================== */

.overview-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.overview-card{
  position:relative;
  background:linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-3);
  overflow:hidden;
}
.overview-card-label{ font-size:0.76rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }
.overview-card-value{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:var(--text-0); }
.overview-card-sub{ font-size:0.78rem; color:var(--text-2); margin-top:4px; }
.overview-card-icon{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(139,92,246,0.12);
  color:var(--violet);
}
@media (max-width:960px){ .overview-grid{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   Workspace grid (chat + preview)
   ========================================================================== */

.app-grid{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:var(--space-3);
  align-items:start;
}

.app-chat-panel{
  background:linear-gradient(165deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-3);
  box-shadow:var(--shadow-s);
  display:flex;
  flex-direction:column;
  height:calc(100vh - 210px);
  min-height:420px;
}

.app-chat-log{
  flex:1;
  overflow-y:auto;
  padding-right:6px;
  margin-bottom:var(--space-2);
}
.app-chat-log .chat-line{ max-width:78%; }

.app-chat-form{
  display:flex;
  gap:10px;
  align-items:flex-end;
  border-top:1px solid var(--line-soft);
  padding-top:var(--space-2);
}
.app-chat-form textarea{
  flex:1;
  resize:none;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:0.7rem 0.9rem;
  color:var(--text-0);
  font-family:var(--font-body);
  font-size:1rem; /* 16px min - avoids iOS Safari auto-zoom on focus */
  max-height:120px;
}
.app-chat-form .btn{ padding:0.7rem; border-radius:var(--radius-m); }

.app-chat-note{ font-size:0.78rem; color:var(--text-2); text-align:left; }
.app-chat-note.center{ text-align:center; margin-top:var(--space-2); }
.app-chat-note a{ color:var(--cyan); text-decoration:underline; }

.app-preview-panel{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.app-indicator-card{ padding:var(--space-3); }

.app-strategy-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-3);
}
.app-strategy-card h3{ font-size:1rem; margin-bottom:var(--space-2); }

.app-strategy-list{ display:flex; flex-direction:column; gap:10px; }
.app-strategy-list > div{ display:flex; justify-content:space-between; gap:12px; }
.app-strategy-list dt{ font-size:0.82rem; color:var(--text-2); }
.app-strategy-list dd{ font-size:0.82rem; color:var(--text-0); text-align:right; }

.app-action-row{ display:flex; flex-direction:column; gap:10px; }

@media (max-width:960px){
  .app-grid{ grid-template-columns:1fr; }
  .app-chat-panel{ height:60vh; }
  /* The workspace is already single-column here, so the 78% cap on chat
     bubbles (line 171) only hurts: on a 375px phone it squeezes an AI
     reply - including any Pine Script code block inside it - down to
     roughly 190px, forcing horizontal scrolling that wasn't necessary.
     Full width still leaves the chat-tag/avatar area readable. */
  .app-chat-log .chat-line{ max-width:100%; }
}

/* ==========================================================================
   Version history
   ========================================================================== */

.history-list{
  max-width:720px;
  display:flex;
  flex-direction:column;
  position:relative;
}
.history-list::before{
  content:"";
  position:absolute;
  left:5px; top:8px; bottom:8px;
  width:1px;
  background:var(--line);
}

.history-item{
  display:flex;
  gap:var(--space-3);
  padding-bottom:var(--space-4);
  position:relative;
}

.history-marker{
  width:11px; height:11px;
  border-radius:50%;
  background:var(--bg-0);
  border:2px solid var(--line);
  margin-top:6px;
  flex-shrink:0;
  z-index:1;
}
.history-marker.current{
  background:var(--grad-primary);
  border-color:transparent;
  box-shadow:0 0 0 4px rgba(139,92,246,0.18);
}

.history-body{ flex:1; }
.history-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.history-head h3{ display:flex; align-items:center; gap:8px; font-size:1.05rem; }
.history-current-tag{
  font-family:var(--font-mono);
  font-size:0.65rem;
  text-transform:uppercase;
  color:var(--green);
  border:1px solid rgba(52,211,153,0.35);
  background:rgba(52,211,153,0.1);
  padding:2px 8px;
  border-radius:999px;
}
.history-date{ font-family:var(--font-mono); font-size:0.78rem; color:var(--text-2); }
.history-body > p{ font-size:0.92rem; margin-bottom:10px; }

.history-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.history-tags span{
  font-size:0.75rem;
  color:var(--text-1);
  border:1px solid var(--line);
  background:var(--bg-2);
  padding:3px 10px;
  border-radius:999px;
}

/* Added/removed concepts vs. the version this one was built on top of
   (see renderChangelog in js/history.js). Kept visually distinct from
   .history-tags above (monospace, +/- prefixes) so it reads as "what
   changed" rather than blending into "what's currently in this
   version". */
.history-changelog{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; font-family:var(--font-mono); font-size:0.78rem; }
.history-changelog-line.added{ color:var(--cyan); }
.history-changelog-line.removed{ color:var(--red); }

/* Shared size modifier for a small secondary action inside a list row
   (version history restore, journal delete, admin reset-password/delete).
   This used to be defined a second time further down (see the old
   .admin-toggle section), and that later same-specificity rule silently
   won over this one, shrinking every .btn-sm on the page - including the
   admin table's Reset Password/Delete buttons - to well under a 44px tap
   target on mobile. Merged into one definition with a min-height floor. */
.btn-sm{ font-size:0.82rem; padding:0.5rem 1rem; min-height:44px; }

/* ==========================================================================
   Trade journal
   ========================================================================== */

/* Four at-a-glance numbers computed client-side from the same entries
   the table below already renders (see computeJournalStats in
   js/journal.js) - no new backend endpoint, this is just arithmetic on
   data that's already fetched. Hidden entirely until there's at least
   one entry with a result (win rate/avg R on zero data is meaningless
   and worse than just not showing the row). */
.journal-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--space-3);
  margin-bottom:var(--space-4);
  max-width:760px;
}
.journal-stat-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-3);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.journal-stat-label{ font-size:0.78rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.06em; }
.journal-stat-value{ font-family:var(--font-mono); font-size:1.3rem; color:var(--text-0); }
.journal-stat-value.win{ color:var(--cyan); }
.journal-stat-value.loss{ color:var(--red); }
.journal-stat-value.warn{ color:#fbbf24; }
@media (max-width:640px){
  .journal-stats{ grid-template-columns:repeat(2, 1fr); }
}

.journal-feedback{
  background:var(--grad-soft);
  border:1px solid rgba(139,92,246,0.3);
  border-radius:var(--radius-l);
  padding:var(--space-3);
  margin-bottom:var(--space-4);
  max-width:760px;
}
.journal-feedback p{ margin-top:8px; font-size:0.92rem; color:var(--text-0); }

.journal-table-wrap{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  overflow-x:auto;
  position:relative;
}
/* On narrow viewports these tables (journal entries, admin's customer
   list) are wider than the screen and scroll horizontally via the
   overflow-x above, but nothing signaled that until now, a mobile user
   would see the visible columns and have no reason to suspect more are
   off-screen. This right-edge fade is a lightweight "there's more" hint
   that doesn't require JS scroll-position tracking (which would need a
   scroll listener + repaint on every table, this is a static gradient
   that's simply hidden above the tablet breakpoint where the tables
   already fit without scrolling). */
@media (max-width: 1040px){
  .journal-table-wrap::after{
    content:"";
    position:absolute;
    top:0; right:0; bottom:0;
    width:28px;
    background:linear-gradient(to right, transparent, var(--bg-2));
    pointer-events:none;
  }
}

.journal-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.88rem;
}
.journal-table th{
  text-align:left;
  padding:14px 18px;
  color:var(--text-2);
  font-family:var(--font-mono);
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  border-bottom:1px solid var(--line);
}
.journal-table td{
  padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
  color:var(--text-1);
}
.journal-table tr:last-child td{ border-bottom:none; }
.journal-table td.yes{ color:var(--green); }
.journal-table td.no{ color:var(--red); }
.journal-table td.win{ color:var(--green); font-family:var(--font-mono); }
.journal-table td.loss{ color:var(--red); font-family:var(--font-mono); }

/* ==========================================================================
   Admin panel (admin.html)
   ========================================================================== */
.admin-table td{ white-space:nowrap; }
.admin-usage{ font-family:var(--font-mono); font-size:0.82rem; }
.admin-plan-select{
  background:var(--bg-1);
  border:1px solid var(--line);
  color:var(--text-0);
  border-radius:var(--radius-s);
  padding:6px 10px;
  font-family:var(--font-body);
  font-size:0.85rem;
}
/* Admin's "Admin access" checkbox: a bare 18x18 <input> wrapped in this
   label with no padding had an effective tap target of ~18px - far below
   the 44px minimum, on the account table's most sensitive control. The
   label itself is now the tap target (checkbox stays visually small,
   centered inside it via flex) rather than just the raw input. */
.admin-toggle{ display:flex; justify-content:center; align-items:center; min-width:44px; min-height:44px; cursor:pointer; }
.admin-toggle input{ width:18px; height:18px; accent-color:var(--violet); cursor:pointer; }
.admin-action-row{ display:flex; gap:8px; }
.admin-danger{ color:var(--red); border-color:rgba(248,113,113,0.35); }
.admin-danger:hover{ border-color:var(--red); background:rgba(248,113,113,0.08); }

/* ==========================================================================
   Customer "coming soon" dashboard
   ========================================================================== */

.dash-shell{ grid-template-columns:1fr; }
.dash-content{ max-width:720px; margin:0 auto; padding-top:var(--space-5); }
.dash-topbar{ margin-bottom:var(--space-4); }
.dash-welcome{ font-size:1.9rem; margin:6px 0 var(--space-3); }

.dash-status-card{
  margin-bottom:var(--space-3);
  background:linear-gradient(160deg, var(--bg-2), rgba(139,92,246,0.08));
  border-color:rgba(139,92,246,0.3);
}
/* Overrides .ic-badge's position:absolute (meant for pinning to a card
   corner elsewhere) so this badge sits inline above the paragraph as
   intended, instead of floating at the viewport's bottom-right corner. */
.dash-badge{ position:static; margin-bottom:10px; display:inline-block; }
.dash-status-card p{ margin-top:8px; }

.dash-feature-grid{ grid-template-columns:1fr 1fr; gap:var(--space-2); margin-bottom:var(--space-3); }

.dash-legal-note{ margin-top:var(--space-3); }

.dash-password-card{ margin-top:var(--space-4); }
.dash-password-card h3{ margin-top:0; margin-bottom:4px; }
.dash-profile-card{ margin-top:var(--space-4); }
.dash-profile-card h3{ margin-top:0; margin-bottom:4px; }

/* Shared field styling for the dashboard's form cards (profile, change
   password). Previously these inputs had no visual styling at all beyond
   .field-password's toggle-button padding, they rendered as bare browser
   default inputs against the dark card, this brings them in line with
   .login-card's field treatment used on the auth pages. */
.dash-profile-card label, .dash-password-card label{
  display:block;
  font-size:0.82rem;
  color:var(--text-1);
  margin-top:12px;
  margin-bottom:6px;
  font-weight:500;
}
.dash-profile-card input, .dash-password-card input{
  width:100%;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:0.7rem 0.9rem;
  color:var(--text-0);
  font-size:1rem; /* 16px min - avoids iOS Safari auto-zoom on focus */
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.dash-profile-card input:focus, .dash-password-card input:focus{
  outline:none;
  border-color:rgba(34,211,238,0.55);
  box-shadow:0 0 0 3px rgba(34,211,238,0.18);
}
.dash-profile-card .btn, .dash-password-card .btn{ margin-top:var(--space-3); }

@media (max-width:640px){
  .dash-feature-grid{ grid-template-columns:1fr; }
}

/* --- settings quick-menu (topbar dropdown) --- */

.dash-topbar-actions{ position:relative; display:flex; align-items:center; gap:10px; }

.dash-settings-btn{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text-1);
  transition:color 0.15s ease, border-color 0.15s ease;
}
.dash-settings-btn:hover{ color:var(--text-0); border-color:var(--cyan); }
.dash-settings-btn[aria-expanded="true"]{ color:var(--cyan); border-color:rgba(34,211,238,0.5); }

.dash-settings-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:220px;
  background:linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.7);
  padding:6px;
  z-index:30;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.dash-settings-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }

.dash-settings-menu button, .dash-settings-menu a{
  display:flex; align-items:center; gap:10px;
  width:100%;
  min-height:44px;
  padding:0.65rem 0.75rem;
  border-radius:8px;
  font-size:0.88rem;
  color:var(--text-1);
  text-align:left;
  background:none; border:none;
  transition:background 0.12s ease, color 0.12s ease;
}
.dash-settings-menu button:hover, .dash-settings-menu a:hover{ background:rgba(255,255,255,0.05); color:var(--text-0); }
.dash-settings-menu svg{ flex-shrink:0; opacity:0.8; }
.dash-settings-menu .menu-divider{ height:1px; background:var(--line-soft); margin:4px 2px; }
.dash-settings-menu .menu-danger{ color:#FCA5A5; }
.dash-settings-menu .menu-danger:hover{ background:rgba(248,113,113,0.1); color:#FCA5A5; }

.dash-danger-card{
  margin-top:var(--space-4);
  border-color:rgba(248,113,113,0.3);
  background:linear-gradient(160deg, var(--bg-2), rgba(248,113,113,0.05));
}
.dash-danger-card h3{ margin-top:0; margin-bottom:4px; color:#FCA5A5; }

/* ==========================================================================
   Login
   ========================================================================== */

.login-body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-3);
}

.login-wrap{ display:flex; flex-direction:column; align-items:center; gap:var(--space-4); width:100%; max-width:380px; }
.login-brand{ font-size:1.1rem; }

/* explicit "<- Back" affordance above the login-card on auth pages
   (signup, login, account-login, forgot/reset password), previously the
   only way back to the marketing site was clicking the logo, which
   people don't reliably recognise as a link. Sits above the brand, its
   own row, so it stays a clearly separate action from the brand mark. */
.login-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.86rem;
  color:var(--text-2);
  transition:color 0.15s ease;
  align-self:flex-start;
}
.login-back:hover{ color:var(--text-0); }
.login-back svg{ flex-shrink:0; }

.login-card{
  width:100%;
  position:relative;
  background:linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-4);
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.6);
  overflow:hidden;
}
/* thin brand-gradient accent along the top edge, ties every auth card
   back to the same signature line used on the hero/pricing cards */
.login-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-primary);
}
.login-card h1{ font-size:1.4rem; margin-bottom:2px; }
.login-sub{ font-size:0.86rem; color:var(--text-2); margin-bottom:var(--space-3); }

.login-card label{ font-size:0.82rem; color:var(--text-1); margin-top:12px; margin-bottom:6px; font-weight:500; }
.login-card input{
  width:100%;
  min-height:44px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:0.7rem 0.9rem;
  color:var(--text-0);
  /* 16px minimum: anything smaller makes iOS Safari auto-zoom the whole
     page on focus, which then has to be manually pinched back out - a
     jarring, "broken" feeling on every login/signup/password page. */
  font-size:1rem;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-card input:focus{
  outline:none;
  border-color:rgba(34,211,238,0.55);
  box-shadow:0 0 0 3px rgba(34,211,238,0.18);
}
.login-card input::placeholder{ color:var(--text-2); }

.login-card .btn{ margin-top:var(--space-3); }

/* password input + show/hide toggle, wraps the existing <input> without
   changing its id or the JS that reads .value from it */
.field-password{ position:relative; }
.field-password input{ padding-right:3rem; }

/* country-code select + national number input, sits on one row like a
   single combined field (signup.html's phone number). */
.phone-field{ display:flex; gap:8px; }
.phone-field select{
  flex:0 0 auto;
  width:118px;
  min-height:44px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:0.7rem 0.5rem;
  color:var(--text-0);
  font-size:1rem; /* 16px min - avoids iOS Safari auto-zoom on focus */
}
.phone-field select:focus{
  outline:none;
  border-color:rgba(34,211,238,0.55);
  box-shadow:0 0 0 3px rgba(34,211,238,0.18);
}
.phone-field input{ flex:1; }

/* live password-strength meter under the signup password field. Hidden
   (via .pw-strength[data-level=""] never being set) until the user
   types, driven entirely by js/signup.js's passwordStrength(). */
.pw-strength{ margin-top:8px; display:flex; align-items:center; gap:10px; }
.pw-strength-bar{
  flex:1; height:5px;
  background:var(--line-soft);
  border-radius:999px;
  overflow:hidden;
}
.pw-strength-bar span{
  display:block; height:100%; width:0%;
  border-radius:999px;
  background:var(--red);
  transition:width 0.2s ease, background 0.2s ease;
}
.pw-strength-label{ font-size:0.78rem; color:var(--text-2); min-width:52px; text-align:right; }
.pw-strength[data-level="weak"] .pw-strength-bar span{ width:33%; background:var(--red); }
.pw-strength[data-level="medium"] .pw-strength-bar span{ width:66%; background:#FBBF24; }
.pw-strength[data-level="strong"] .pw-strength-bar span{ width:100%; background:var(--green); }
.pw-strength[data-level="weak"] .pw-strength-label{ color:var(--red); }
.pw-strength[data-level="medium"] .pw-strength-label{ color:#FBBF24; }
.pw-strength[data-level="strong"] .pw-strength-label{ color:var(--green); }
/* 44x44 hit area (mobile tap-target minimum) with the visible icon
   staying compact at 18px, the button's box is just bigger than what's
   drawn inside it. Was 30x30 with no visual change needed since the
   extra hit area is invisible (no border/background at rest). */
.field-toggle{
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:8px;
  color:var(--text-2);
  transition:color 0.15s ease, background 0.15s ease;
}
.field-toggle:hover{ color:var(--text-0); background:rgba(255,255,255,0.05); }
.field-toggle svg{ width:18px; height:18px; }

/* inline status banners, replace the old bare .login-error/.login-sub
   success text with a bordered chip so pass/fail states read at a
   glance instead of blending into the surrounding copy */
.form-alert{
  display:none;
  align-items:flex-start;
  gap:8px;
  font-size:0.84rem;
  line-height:1.4;
  padding:0.65rem 0.85rem;
  border-radius:var(--radius-m);
  margin-top:10px;
}
.form-alert.show{ display:flex; }
.form-alert-error{
  color:#FCA5A5;
  background:rgba(248,113,113,0.1);
  border:1px solid rgba(248,113,113,0.3);
}
.form-alert-success{
  color:#6EE7B7;
  background:rgba(52,211,153,0.1);
  border:1px solid rgba(52,211,153,0.3);
}
.form-alert svg{ flex-shrink:0; margin-top:2px; }

/* spinner shown inside a submit button while a request is in flight.
   Markup: <button class="btn"><span class="btn-label">Text</span>
   <span class="btn-spinner" aria-hidden="true"></span></button> */
.btn{ position:relative; }
.btn .btn-spinner{
  display:none;
  width:16px; height:16px;
  border-radius:50%;
  border:2px solid rgba(11,8,18,0.35);
  border-top-color:#0B0812;
  animation:btnSpin 0.7s linear infinite;
}
.btn.is-loading .btn-label{ visibility:hidden; }
.btn.is-loading .btn-spinner{
  display:inline-block;
  position:absolute; left:50%; top:50%;
  margin:-8px 0 0 -8px;
}
.btn.is-loading{ pointer-events:none; opacity:0.9; }
@keyframes btnSpin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   Pine Script output block + status badge
   ========================================================================== */

.app-pine-block{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:var(--space-3);
  max-height:280px;
  overflow:auto;
  font-family:var(--font-mono);
  font-size:0.78rem;
  line-height:1.5;
  color:var(--text-1);
  white-space:pre;
}

.app-status-warn{ background:rgba(248,113,113,0.12); border-color:rgba(248,113,113,0.35); color:var(--red); }

/* ==========================================================================
   Journal: add-trade form + delete button
   ========================================================================== */

.journal-add-form{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-3);
  margin-bottom:var(--space-3);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.jaf-row{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.jaf-row label{ display:flex; flex-direction:column; gap:6px; font-size:0.82rem; color:var(--text-1); flex:1; min-width:140px; }
.jaf-row input, .jaf-row select{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:0.55rem 0.75rem;
  color:var(--text-0);
  font-size:1rem; /* 16px min - avoids iOS Safari auto-zoom on focus */
}
.jaf-actions{ display:flex; justify-content:flex-end; }