@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

:root{
  --bg:#f5f5f7;--surface:#fff;--surface2:#f5f5f7;--surface3:#e8e8ed;
  --border:#d2d2d7;--border2:#e8e8ed;
  --text:#1d1d1f;--text2:#424245;--muted:#6e6e73;--subtle:#aeaeb2;
  --blue:#0071e3;--blue-light:#e8f0fb;--blue-dark:#0058b0;
  --green:#1a8f3c;--green-light:#edf7f0;
  --red:#cc2929;--red-light:#fdf0f0;
  --price-up:var(--red);--price-up-light:var(--red-light);
  --price-down:var(--green);--price-down-light:var(--green-light);
  --up:var(--red);--down:var(--green);--up-bg:var(--red-light);--down-bg:var(--green-light);
  --amber:#b35c00;--amber-light:#fdf5e8;
  --purple:#5e35b1;--purple-light:#f0ebfb;
  --pink:#c2185b;--pink-light:#fce8f1;
  --teal:#00796b;--teal-light:#e0f5f3;
  --score-high:#1a8f3c;--score-mid:#b35c00;--score-low:#6e6e73;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.08);
  --radius:12px;--radius-sm:8px;--radius-xs:6px;
  --hm-gap:#c2c6ce;--hm-tile-txt:#fff;
}
[data-theme="dark"]{
  --bg:#000;--surface:#1c1c1e;--surface2:#2c2c2e;--surface3:#3a3a3c;
  --border:#3a3a3c;--border2:#2c2c2e;
  --text:#f5f5f7;--text2:#ebebf5;--muted:#98989d;--subtle:#636366;
  --blue:#2997ff;--blue-light:#001f3f;--blue-dark:#64b5f6;
  --green:#32d74b;--green-light:#0a2e14;
  --red:#ff453a;--red-light:#2e0a0a;
  --amber:#ffd60a;--amber-light:#2e1f00;
  --purple:#bf5af2;--purple-light:#1e0a2e;
  --pink:#ff375f;--pink-light:#2e0a18;
  --teal:#5ac8fa;--teal-light:#002e36;
  --shadow:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
  --shadow-md:0 4px 12px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3);
  --hm-gap:#060606;
}
[data-color="us"]{
  --price-up:var(--green);--price-up-light:var(--green-light);
  --price-down:var(--red);--price-down-light:var(--red-light);
  --up:var(--green);--down:var(--red);--up-bg:var(--green-light);--down-bg:var(--red-light);
}

body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'SF Pro Display','Inter',sans-serif;
     font-size:14px;line-height:1.5;min-height:100vh;transition:background .2s,color .2s;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

@keyframes qtGrad{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes spin{to{transform:rotate(360deg)}}

.mono{font-family:'IBM Plex Mono',monospace}
.divider{height:1px;background:var(--border2);margin:20px 0}

.loading-spinner{
  display:flex;align-items:center;justify-content:center;
  width:auto!important;height:auto!important;min-height:28px;
  margin:0 auto 20px;border:none!important;background:none!important}
.loading-spinner>*{display:none}
.loading-spinner::after{
  content:'Quants.tw';font-size:22px;font-weight:700;letter-spacing:-.4px;
  font-family:system-ui,-apple-system,'SF Pro Display','Inter',sans-serif;
  background:linear-gradient(90deg,#0071e3,#5e5ce6,#bf5af2,#0071e3,#5e5ce6);
  background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:qtGrad 2s linear infinite}
.loading-state{text-align:center;padding:60px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:180px}
.loading-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px}
.loading-sub{font-size:13px;color:var(--muted)}

.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-icon{font-size:40px;margin-bottom:12px}
.empty-title{font-size:15px;font-weight:600;color:var(--text2);margin-bottom:4px}
.empty-sub{font-size:13px}

.nav{background:rgba(255,255,255,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
     border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;
     padding:env(safe-area-inset-top) max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left))}
[data-theme="dark"] .nav{background:rgba(28,28,30,.85)}
.nav-inner{display:flex;align-items:center;gap:12px;height:52px;max-width:1400px;margin:0 auto}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-decoration:none;flex-shrink:0}
.logo-text{font-size:15px;font-weight:700;color:#0071e3;letter-spacing:-.4px;line-height:1.2;
           font-family:system-ui,-apple-system,'SF Pro Display','Inter',sans-serif}
.logo-sub{font-size:9px;color:var(--muted);font-weight:500;letter-spacing:.4px;text-transform:uppercase;line-height:1}
.nav-logo{font-size:14px;font-weight:700;color:var(--text);margin-left:auto;text-decoration:none}
.back-btn{display:flex;align-items:center;gap:5px;color:var(--blue);text-decoration:none;
          font-size:13px;font-weight:500;padding:6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.back-btn:hover{text-decoration:underline}
.theme-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
           background:var(--surface2);cursor:pointer;display:flex;align-items:center;
           justify-content:center;font-size:15px;transition:.15s}
.theme-btn:hover{background:var(--surface3)}
.color-btn{height:28px;padding:0 9px;border-radius:14px;border:1px solid var(--border);
           background:var(--surface2);cursor:pointer;font-size:11px;font-weight:700;
           color:var(--text2);transition:.15s;white-space:nowrap;display:flex;align-items:center;gap:3px}
.color-btn:hover{background:var(--surface3)}
.lang-btn{height:28px;padding:0 10px;border-radius:14px;border:1px solid var(--border);
          background:var(--surface2);cursor:pointer;font-size:11px;font-weight:700;
          color:var(--text2);transition:.15s;font-family:'Inter',sans-serif}
.lang-btn:hover{background:var(--surface3)}
.nav-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--border);
         background:transparent;color:var(--text2);cursor:pointer;font-size:12px;
         font-family:'Inter',sans-serif;font-weight:500;transition:.15s;
         display:flex;align-items:center;gap:5px;text-decoration:none}
.nav-btn:hover{background:var(--surface2)}
.nav-btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.nav-btn.primary:hover{background:var(--blue-dark)}
.nav-auth-btn{font-size:12px;font-weight:700;color:#fff;
              background:linear-gradient(135deg,#0071e3,#5e35b1);
              padding:6px 14px;border-radius:20px;border:none;cursor:pointer;
              display:flex;align-items:center;gap:5px;white-space:nowrap}
.nav-user-chip{font-size:11px;font-weight:600;color:var(--text2);
               background:var(--surface2);border:1px solid var(--border);
               border-radius:20px;padding:5px 12px;display:flex;align-items:center;gap:6px;
               white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;
               cursor:pointer;user-select:none}
.nav-user-chip:hover{background:var(--surface3,var(--border))}
.nav-user-chip .dot{width:6px;height:6px;border-radius:50%;background:#1a8f3c;flex-shrink:0}
.mobile-search-btn{display:none}
.live-badge{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--green)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}

#account-menu{position:fixed;top:0;right:0;z-index:9900;
              background:var(--surface);border:1px solid var(--border);border-radius:14px;
              box-shadow:0 8px 32px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.12);
              min-width:220px;padding:6px 0;display:none;font-size:13px;color:var(--text)}
#account-menu.open{display:block}
.acct-menu-header{padding:12px 16px 10px;border-bottom:1px solid var(--border)}
.acct-menu-email{font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu-badge{margin-top:4px;font-size:11px;font-weight:600;color:var(--green);display:none}
.acct-menu-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;
                color:var(--text2);text-decoration:none;background:none;border:none;
                width:100%;text-align:left;font-size:13px;font-weight:500}
.acct-menu-item:hover{background:var(--surface2)}
.acct-menu-sep{height:1px;background:var(--border);margin:4px 0}
.acct-menu-item.danger{color:#e53e3e}
[data-theme="dark"] .acct-menu-item.danger{color:#ff6b6b}

.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;
     border-radius:10px;font-size:11px;font-weight:500}
.tag-green{background:var(--green-light);color:var(--green)}
.tag-red{background:var(--red-light);color:var(--red)}
.tag-amber{background:var(--amber-light);color:var(--amber)}
.tag-blue{background:var(--blue-light);color:var(--blue)}
.tag-gray{background:var(--surface3);color:var(--muted)}
.tag-purple{background:var(--purple-light);color:var(--purple)}
.tag-pink{background:var(--pink-light);color:var(--pink)}
.tag-teal{background:var(--teal-light);color:var(--teal)}
.tag-muted{background:var(--surface2);color:var(--muted)}

.score-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;
             border-radius:10px;font-family:'IBM Plex Mono',monospace;
             font-size:12px;font-weight:700}
.score-high{background:var(--green-light);color:var(--green)}
.score-mid{background:var(--amber-light);color:var(--amber)}
.score-low{background:var(--surface2);color:var(--muted)}
.score-urgent{background:var(--red-light);color:var(--red)}

.filter-pill{padding:6px 14px;border-radius:20px;border:1px solid var(--border);
             background:var(--surface);color:var(--text2);cursor:pointer;font-size:12px;
             font-weight:500;transition:.15s;user-select:none;
             display:flex;align-items:center;gap:5px}
.filter-pill:hover{border-color:var(--blue);color:var(--blue)}
.filter-pill.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.filter-pill.on-red{background:var(--red);color:#fff;border-color:var(--red)}
.filter-pill.on-amber{background:var(--amber);color:#fff;border-color:var(--amber)}
.filter-pill.on-green{background:var(--green);color:#fff;border-color:var(--green)}
.filter-pill.on-purple{background:var(--purple);color:#fff;border-color:var(--purple)}

.glossary{display:inline-flex;align-items:center;gap:3px;cursor:help;position:relative}
.glossary-icon{width:14px;height:14px;border-radius:50%;background:var(--border);
               color:var(--muted);font-size:9px;display:inline-flex;
               align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.glossary-tip{display:none;position:absolute;bottom:calc(100% + 6px);left:0;
              background:var(--text);color:var(--surface);padding:8px 12px;
              border-radius:8px;font-size:11px;line-height:1.5;
              min-width:200px;max-width:280px;z-index:500;
              box-shadow:var(--shadow-md);font-weight:400;pointer-events:none}
.glossary:hover .glossary-tip{display:block}
[data-theme="dark"] .glossary-tip{background:var(--surface3);color:var(--text)}

.tkr-locked{display:inline-block;filter:blur(5px);-webkit-filter:blur(5px);user-select:none;
            letter-spacing:1px;color:var(--muted);vertical-align:middle}

.pro-blur{position:relative;overflow:hidden;border-radius:12px;min-height:220px}
.pro-blur-skel{filter:blur(6px);-webkit-filter:blur(6px);pointer-events:none;user-select:none;opacity:.7;padding:14px}
.pro-blur-skel .pbs-row{height:34px;border-radius:8px;background:var(--surface2);border:1px solid var(--border);margin-bottom:8px;
  background-image:linear-gradient(90deg,var(--surface2) 0%,var(--surface) 50%,var(--surface2) 100%);
  background-size:200% 100%;animation:pbs-shimmer 1.6s linear infinite}
.pro-blur-skel .pbs-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.pro-blur-skel .pbs-cell{height:30px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);
  background-image:linear-gradient(90deg,var(--surface2) 0%,var(--surface) 50%,var(--surface2) 100%);
  background-size:200% 100%;animation:pbs-shimmer 1.6s linear infinite}
@keyframes pbs-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.pro-blur-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:6px;padding:24px 20px}
.pro-blur-overlay .pbo-icon{font-size:30px}
.pro-blur-overlay .pbo-title{font-size:14px;font-weight:700;color:var(--text)}
.pro-blur-overlay .pbo-desc{font-size:13px;color:var(--muted);max-width:420px;line-height:1.6;margin-bottom:8px}
.pro-blur-overlay .pbo-cta{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;
  font-size:13px;font-weight:700;padding:10px 22px;border-radius:10px}
.pro-unlock-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;
  background:var(--amber-light,rgba(245,158,11,.1));border:1px solid var(--amber,#f59e0b);
  border-radius:12px;padding:12px 16px;margin-bottom:14px}
.pro-unlock-banner a{flex-shrink:0;background:var(--blue);color:#fff;text-decoration:none;
  font-size:12px;font-weight:700;padding:8px 16px;border-radius:8px;white-space:nowrap}

.skeleton{background:linear-gradient(90deg,var(--surface2) 0%,var(--surface3) 50%,var(--surface2) 100%);
          background-size:800px 100%;animation:shimmer 1.4s linear infinite;
          border-radius:6px;display:block}
.skel-line{height:12px;margin-bottom:8px}
.skel-card{height:60px;margin-bottom:8px;border-radius:var(--radius-sm)}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}
.panel.tight{padding:12px 14px}
.panel.flush{padding:0;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.panel-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.panel-body{padding:16px 18px}

.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px}
.kpi-num{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:700;line-height:1.1;margin-bottom:3px}
.kpi-lbl{font-size:11px;color:var(--muted);font-weight:500}
.kpi-delta{font-size:11px;font-family:'IBM Plex Mono',monospace;margin-top:2px}
.kpi.compact .kpi-num{font-size:18px}

.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;
         background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.toolbar > .toolbar-grow{flex:1;min-width:160px}
.toolbar .filter-pill{margin:0}

.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{font-size:11px;font-weight:600;color:var(--muted);text-align:left;
               padding:8px 12px;border-bottom:1px solid var(--border);
               white-space:nowrap;cursor:pointer;user-select:none;letter-spacing:.02em;text-transform:uppercase}
.data-table th:hover{color:var(--text)}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--border2);vertical-align:middle}
.data-table tr{cursor:pointer;transition:.1s}
.data-table tr:hover td{background:var(--surface2)}
.data-table tr:last-child td{border:none}

.pledge-bar-wrap{display:flex;align-items:center;gap:8px}
.pledge-bg{width:80px;height:6px;background:var(--border);border-radius:3px;;overflow:hidden}
.pledge-fill{height:100%;border-radius:3px;transition:.3s}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

.view-toggle{display:flex;gap:4px;background:var(--surface2);border-radius:8px;padding:3px}
.vt-btn{padding:4px 12px;border-radius:6px;border:none;background:transparent;
        cursor:pointer;font-size:12px;font-weight:500;color:var(--muted);
        transition:.15s;font-family:'Inter',sans-serif}
.vt-btn.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-title{font-size:17px;font-weight:600;letter-spacing:-.3px}
.section-sub{font-size:12px;color:var(--muted);margin-top:1px}
.view-all{font-size:12px;color:var(--blue);cursor:pointer;font-weight:500;
          text-decoration:none;background:none;border:none;padding:0}
.view-all:hover{text-decoration:underline}

@media(max-width:1024px){
  #last-updated{display:none}
}
@media(max-width:768px){
  input,select,textarea{font-size:16px!important}
  .two-col,.three-col{grid-template-columns:minmax(0,1fr)}
  .nav-inner{gap:6px}
  .search-wrap{max-width:none}
  .live-badge{display:none}
  .logo-sub{display:none}
  .refresh-btn .nav-btn-label{display:none}
  #help-btn .nav-btn-label, #help-btn span[data-i18n]{display:none}
  #help-btn{padding:5px 10px!important}
}
@media(max-width:560px){
  .refresh-btn{display:none!important}
  .search-wrap{display:none!important}
  .mobile-search-btn{display:flex!important}
  .nav-user-chip span{display:none}
  .nav-user-chip{padding:5px 8px;gap:0}
  #nav-conviction .nav-btn-label{display:none}
  #nav-conviction{padding:6px 10px!important}
}