*{box-sizing:border-box}

  html{
    background:var(--bg);
  }

  body{
    margin:0;
    font-family:Aptos, "Aptos Display", Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  select,
  textarea,
  input{
    width:100%;
    background:var(--surface);
    border:1px solid var(--border-strong);
    border-radius:14px;
    color:var(--text);
    font-family:Aptos, "Aptos Display", Arial, sans-serif;
    font-size:14px;
    line-height:1.45;
    padding:12px 14px;
    outline:none;
    transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }

  select:hover,
  textarea:hover,
  input:hover{
    background:var(--surface-muted);
    border-color:var(--accent-line);
  }

  .inputWrap:hover input,
  .providerWrap:hover select{
    background:var(--surface-muted);
    border-color:var(--accent-line);
  }

  .inputWrap.is-active input,
  .providerWrap.is-active select,
  select:focus,
  textarea:focus,
  input:focus{
    background:var(--surface);
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(207,155,50,.16);
  }

  select{
    height:44px;
  }

  textarea{
    min-height:140px;
    resize:vertical;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-gutter:stable;
    padding-right:16px;
    padding-bottom:16px;
  }

  textarea::-webkit-scrollbar{
    width:10px;
    height:10px;
  }

  textarea::-webkit-scrollbar-track{
    background:transparent;
  }

  textarea::-webkit-scrollbar-thumb{
    background:#b7ab8d;
    border-radius:999px;
    border:2px solid transparent;
    background-clip:padding-box;
  }

  textarea::-webkit-scrollbar-thumb:hover{
    background:#988a68;
    border:2px solid transparent;
    background-clip:padding-box;
  }

  textarea::-webkit-scrollbar-corner{
    background:var(--surface);
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 18px;
    min-height:44px;
    border:1px solid var(--primary);
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    cursor:pointer;
    font-family:Aptos, "Aptos Display", Arial, sans-serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:.01em;
    transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
    box-shadow:none;
  }

  .btn:hover{
    background:var(--primary2);
    border-color:var(--primary2);
    transform:translateY(-1px);
  }

  .btn:disabled{
    cursor:not-allowed;
    opacity:.72;
    transform:none;
  }

  .btn.is-loading{
    gap:8px;
  }

  .btn.is-loading::after{
    content:"";
    position:static;
    width:14px;
    height:14px;
    margin-top:0;
    border:2px solid rgba(255,255,255,.45);
    border-top-color:#fff;
    border-radius:999px;
    animation:spin .8s linear infinite;
  }

  .btn.secondary{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--primary);
  }

  .btn.secondary:hover{
    background:var(--accent-deep);
    border-color:var(--accent-deep);
    color:var(--primary);
  }

  .btn.ghost,
  .btn.soft{
    background:var(--surface);
    color:var(--primary);
    border-color:var(--border-strong);
  }

  .btn.ghost:hover,
  .btn.soft:hover{
    background:var(--surface-muted);
    border-color:var(--accent-line);
  }

  .btn.danger,
  .btn.retry{
    background:var(--danger-bg);
    color:var(--danger-text);
    border-color:var(--danger-line);
  }

  .btn.danger:hover,
  .btn.retry:hover{
    background:#f7e7e7;
    border-color:#d3a1a1;
  }

  #pushModalCopy.is-copied{
    background:#e4eedf;
    color:var(--ok-text);
    border-color:#7f9a73;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  }

  #pushModalCopy.is-copied:hover{
    background:#dbe8d4;
    border-color:#6f8c63;
  }

  .muted{
    color:var(--muted);
    font-size:12px;
  }

  .pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface);
    font-size:12px;
    color:var(--muted);
  }

  .pill.status-ready{
    color:var(--muted);
    background:var(--surface);
    border-color:var(--border);
  }

  .pill.status-loading{
    color:var(--warn-text);
    background:var(--warn-bg);
    border-color:var(--warn-line);
  }

  .pill.status-done{
    color:var(--ok-text);
    background:var(--ok-bg);
    border-color:var(--ok-line);
  }

  .pill.status-error{
    color:var(--danger-text);
    background:var(--danger-bg);
    border-color:var(--danger-line);
  }

  .pill.provider-ubs,
  .pill.provider-citi,
  .pill.provider-ms{
    color:var(--primary);
    background:var(--accent-soft);
    border-color:var(--accent-line);
  }

  .providerWrap{
    position:relative;
    width:100%;
  }

  #providerDisplay,
  #channelDisplay,
  #languageDisplay{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    height:44px;
    padding-right:40px;
    cursor:pointer;
  }

  .providerWrap::after{
    content:"";
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:6px solid var(--slate-ink);
    opacity:.9;
    transition:border-top-color .16s ease;
  }

  .providerWrap:hover::after,
  .providerWrap.is-active::after{
    border-top-color:var(--primary);
  }

  .pMenu{
    position:absolute;
    top:48px;
    left:0;
    right:0;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow2);
    padding:8px;
    margin-top:8px;
    z-index:999;
  }

  .pItem{
    position:relative;
    padding:11px 38px 11px 12px;
    font-size:14px;
    line-height:1.25;
    cursor:pointer;
    user-select:none;
    border-radius:12px;
    background:var(--surface);
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  .pItem:hover{
    background:var(--primary);
    color:var(--nativeHoverText);
  }

  .pDivider{
    height:1px;
    background:var(--border-soft);
    margin:6px;
  }

  .pItem .tick{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    font-weight:800;
    opacity:0;
    color:inherit;
  }

  .pItem.selected .tick{
    opacity:1;
  }

  .tMenu{
    max-height:260px;
    position:absolute;
    top:64px;
    left:0;
    right:0;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow2);
    z-index:999;
    overflow:hidden;
    padding:8px;
    margin-top:8px;
  }

  .tMenuInner{
    max-height:260px;
    overflow-y:auto;
  }

  .tItem{
    position:relative;
    padding:11px 12px;
    cursor:pointer;
    user-select:none;
    font-size:14px;
    display:flex;
    align-items:center;
    border-radius:12px;
    color:var(--text);
  }

  .tItem:hover,
  .tItem.active{
    background:var(--primary);
    color:var(--nativeHoverText);
  }

  .tLeft{
    display:flex;
    gap:8px;
    align-items:center;
    min-width:0;
    width:100%;
  }

  .tTicker{
    font-weight:700;
    letter-spacing:.01em;
    flex:0 0 auto;
  }

  .tName{
    font-size:13px;
    color:var(--muted);
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:1 1 auto;
  }

  .tItem:hover .tName,
  .tItem.active .tName{
    color:rgba(255,255,255,.82);
  }

  .tEmpty{
    padding:10px 12px;
    font-size:14px;
    color:var(--muted);
    border-radius:12px;
  }

  .inputWrap{
    position:relative;
    width:100%;
  }

  .inputWrap input,
  .providerWrap select{
    transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  }

  .inputClear{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    border:none;
    background:transparent;
    border-radius:0;
    box-shadow:none;
    color:#8f97a5;
    font-size:20px;
    line-height:14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
  }

  .inputClear:hover{
    color:var(--primary);
  }

  #tickerInput{
    padding-right:38px;
  }

  .tickerUploadWrap{
    margin-bottom:8px;
    border-radius:14px;
    transition:background-color .16s ease, box-shadow .16s ease;
  }

  .tickerToolRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:10px;
  }

  .uploadMiniBtn{
    width:40px;
    height:40px;
    padding:0;
    border-radius:999px;
    font-size:28px;
    line-height:1;
    font-weight:400;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    background:transparent;
    color:var(--primary-steel);
    cursor:pointer;
    transition:border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
    transform:translateY(-2px);
  }

  .uploadMiniBtn:hover,
  .uploadMiniBtn:focus-visible,
  .uploadMiniBtn.is-dragover{
    border-color:var(--accent-line);
    color:var(--primary);
    background:var(--accent-soft);
    box-shadow:inset 0 0 0 1px rgba(207,155,50,.14);
    outline:none;
  }

  .uploadMiniWrap{
    position:relative;
    display:inline-flex;
    align-items:center;
    cursor:pointer;
  }

  .uploadMiniHint{
    position:absolute;
    left:46px;
    top:50%;
    transform:translateY(-50%) translateX(-4px);
    background:var(--primary2);
    color:#fff;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    padding:7px 11px;
    box-shadow:0 8px 18px rgba(20,21,63,.18);
    opacity:0;
    pointer-events:none;
    white-space:nowrap;
    z-index:7;
    transition:opacity .14s ease, transform .14s ease;
  }

  .uploadMiniBtn:hover + .uploadMiniHint,
  .uploadMiniBtn:focus-visible + .uploadMiniHint{
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }

  .detectedCount{
    font-size:12px;
    color:var(--muted);
  }

  #fetchTickers.is-dragover,
  #pushTickers.is-dragover{
    background:var(--accent-soft);
    border-color:var(--accent-line);
    box-shadow:inset 0 0 0 1px rgba(207,155,50,.16);
  }

  .pill,
  .fetchStat,
  .pushTask,
  .fetchProviders label{
    background:var(--surface);
    border-color:var(--border);
    color:var(--primary);
  }

  .fetchStat{
    border-width:1px;
    border-style:solid;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  }

  .fetchStat.total{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
    box-shadow:none;
  }

  .fetchStat.total .k{
    color:rgba(255,255,255,.82);
  }

  .fetchStat.total .v{
    color:#fff;
  }

  .pill.status-loading,
  .fetchStat.cancel,
  .pushTask.running{
    background:var(--warn-bg);
    border-color:var(--warn-line);
    color:var(--warn-text);
  }

  .pill.status-done,
  .fetchStat.ok{
    background:var(--ok-bg);
    border-color:var(--ok-line);
    color:var(--ok-text);
  }

  .pill.status-error,
  .fetchStat.fail{
    background:var(--danger-bg);
    border-color:var(--danger-line);
    color:var(--danger-text);
  }

  .tName,
  .fetchStat .k{
    color:var(--muted);
  }

  @keyframes spin{
    to{ transform:rotate(360deg); }
  }

  @keyframes skeleton{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
  }

  @keyframes typingPulse{
    0%, 80%, 100%{
      transform:translateY(0);
      opacity:.35;
    }
    40%{
      transform:translateY(-2px);
      opacity:1;
    }
  }