/* v5: custom dark dropdowns for Timeframe & Candle Count */
:root{
  --bg:#121212;
  --panel:#1E1E1E;
  --text:#E8E8E8;
  --muted:#A7A7A7;
  --accent:#007BFF;
  --error:#FF4D4D;
  --ring: rgba(0,123,255,0.35);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg);
  color:var(--text);
  letter-spacing:.2px;
}

.app{
  max-width:600px;
  margin:0 auto;
  min-height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:12px;
  padding:32px 18px 24px;
}

h1{
  font-size:28px;
  font-weight:700;
  margin:4px 0 2px;
  text-align:center;
}

.form{ display:flex; flex-direction:column; row-gap:18px; }
.form-group{ margin:0; }
.form-group.compact{ margin:0; }

.field-label{ display:block; font-size:14px; color:var(--muted); margin:0 0 6px; }
.helper-text{ font-size:12px; color:var(--muted); margin:6px 2px 0; }

/* Inputs base */
.number,.combo,.dropdown-display{
  width:100%;
  background:var(--panel);
  border:1px solid #3a3a3a;
  border-radius:var(--radius);
  padding:12px 14px;
  color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease, background .2s ease;
}
.number:focus,.combo:focus-within,.dropdown-display:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--ring);
  outline:none;
}
.number{appearance:textfield}
.number::-webkit-outer-spin-button,.number::-webkit-inner-spin-button{appearance:none;margin:0}

/* Dropdown (custom) */
.dropdown{ position:relative; }
.dropdown-display{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg,#1f1f1f,#181818);
  cursor:pointer;
}
.dropdown-display::after{
  content:"";
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid #f0f0f0;
}
.dropdown[aria-expanded="true"] .dropdown-display::after{ transform: rotate(180deg); }

.dropdown-list{
  position:absolute; left:0; right:0; top:calc(100% + 8px);
  max-height:260px; overflow:auto; z-index:25;
  padding:6px; margin:0; list-style:none;
  display:none;
  background:#161616;
  border:1px solid #2a2a2a;
  border-radius:12px;
}
.dropdown[aria-expanded="true"] .dropdown-list{ display:block; }
.dropdown-option{
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  color:var(--text);
}
.dropdown-option:hover, .dropdown-option.active{ background:#212121; }
.dropdown-option[aria-selected="true"]{ outline:2px solid var(--accent); outline-offset:2px; }

/* Combobox */
.combo{ position:relative; display:flex; align-items:center; gap:8px; padding:0; }
.combo-input{
  flex:1 1 auto; background:transparent; border:none; color:var(--text);
  padding:12px 14px; font-size:16px; outline:none;
}
.combo-toggle{
  flex:0 0 auto; width:36px; height:36px; margin-right:6px; border-radius:10px;
  border:1px solid #3a3a3a; background:linear-gradient(180deg,#242424,#1a1a1a);
  cursor:pointer; position:relative;
}
.combo-toggle::after{
  content:""; position:absolute; top:50%; left:50%;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:7px solid #f0f0f0; transform:translate(-50%,-25%); opacity:.95;
}
.combo-list{
  position:absolute; z-index:20; top:calc(100% + 8px); left:0; right:0;
  max-height:250px; overflow:auto; background:#161616; border:1px solid #2a2a2a;
  border-radius:12px; padding:6px; display:none; list-style:none; margin:0;
}
.combo[aria-expanded="true"] .combo-list{ display:block; }
.combo-option{ padding:10px 12px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.combo-option:hover,.combo-option[aria-selected="true"]{ background:#212121; }
.combo-option.active{ outline:2px solid var(--accent); outline-offset:2px; background:#1f2633; }
.combo-empty{ padding:10px 12px; color:var(--muted); }

/* Error flash */
.combo.error, .number.error, .dropdown-display.error{
  border-color:var(--error);
  box-shadow:0 0 0 4px rgba(255,77,77,.25);
  animation:shake .22s ease-in-out 0s 1;
}
@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  50%{transform:translateX(3px)}
  75%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}

.btn-primary{
  appearance:none; border:none; background:var(--accent); color:white;
  border-radius:var(--radius); padding:14px 16px; font-weight:600; letter-spacing:.3px;
  cursor:pointer; transition:transform .06s ease, filter .15s ease, box-shadow .2s ease;
  box-shadow:0 6px 18px rgba(0,123,255,.25); width:100%;
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{transform:translateY(1px)}

.result{
  background:linear-gradient(180deg, #1E1E1E, #191919);
  border:1px solid #2a2a2a;
  border-radius:var(--radius);
  padding:16px;
  min-height:80px;
  white-space:pre-line;
}

.footer{ margin-top:6px; text-align:center; color:var(--muted); font-size:12px; }


/* === Patch: RTL + Vazirmatn for Persian analysis === */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap');

/* Ensure the analysis box renders right-to-left and uses Vazirmatn */
#result, .result, .analysis-box {
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.9;
  font-weight: 400;
}
/* Keep headings monospace if needed, but prefer Vazirmatn for Persian */
.result h1, .result h2, .result h3, #result h1, #result h2, #result h3 {
  font-family: 'Vazirmatn', inherit;
}

/* Preserve pre-wrapped new lines for AI output */
#result { white-space: pre-wrap; }