| @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap'); |
|
|
| |
| |
| |
| :root { |
| --cyan: #00f0ff; |
| --blue: #3b82f6; |
| --purple: #8b5cf6; |
| --pink: #f472b6; |
| --green: #10b981; |
| --amber: #f59e0b; |
| --dark: #060918; |
| --glass: rgba(255, 255, 255, 0.04); |
| --border: rgba(255, 255, 255, 0.09); |
| --text: #e2e8f0; |
| --muted: #64748b; |
| } |
|
|
| |
| |
| |
| html, body, .stApp { |
| background: var(--dark) !important; |
| color: var(--text) !important; |
| font-family: 'DM Sans', system-ui, sans-serif !important; |
| } |
|
|
| |
| |
| |
| .stApp::before, |
| .stApp::after { |
| content: ""; |
| position: fixed; |
| border-radius: 50%; |
| filter: blur(100px); |
| opacity: 0.18; |
| pointer-events: none; |
| z-index: 0; |
| animation: orbDrift 18s ease-in-out infinite alternate; |
| } |
| .stApp::before { |
| width: 700px; |
| height: 700px; |
| background: radial-gradient(circle, var(--cyan), transparent 70%); |
| top: -240px; |
| left: -200px; |
| } |
| .stApp::after { |
| width: 540px; |
| height: 540px; |
| background: radial-gradient(circle, var(--purple), transparent 70%); |
| bottom: -180px; |
| right: -160px; |
| animation-delay: -9s; |
| } |
| @keyframes orbDrift { |
| 0% { transform: translate(0, 0) scale(1); } |
| 100% { transform: translate(60px, 50px) scale(1.1); } |
| } |
|
|
| |
| .stApp > div::before { |
| content: ""; |
| position: fixed; |
| inset: 0; |
| pointer-events: none; |
| z-index: 0; |
| background-image: |
| linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); |
| background-size: 60px 60px; |
| } |
|
|
| |
| |
| |
| h1, h2, h3, h4 { |
| font-family: 'Syne', system-ui, sans-serif !important; |
| font-weight: 800 !important; |
| background: linear-gradient(135deg, #fff 20%, var(--cyan) 60%, var(--blue) 100%) !important; |
| -webkit-background-clip: text !important; |
| -webkit-text-fill-color: transparent !important; |
| background-clip: text !important; |
| letter-spacing: -0.5px !important; |
| animation: fadeUp 0.7s cubic-bezier(.22,1,.36,1) both; |
| } |
| @keyframes fadeUp { |
| from { opacity: 0; transform: translateY(22px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| p, li { color: #94a3b8; } |
|
|
| |
| |
| |
| .card { |
| background: var(--glass); |
| backdrop-filter: blur(24px); |
| -webkit-backdrop-filter: blur(24px); |
| border: 1px solid var(--border); |
| border-radius: 22px; |
| padding: 2rem; |
| position: relative; |
| box-shadow: |
| 0 8px 40px rgba(0,0,0,0.45), |
| inset 0 1px 0 rgba(255,255,255,0.08); |
| transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; |
| animation: fadeUp 0.6s cubic-bezier(.22,1,.36,1) both; |
| margin-bottom: 1.5rem; |
| } |
| .card::before { |
| content: ''; |
| position: absolute; |
| top: -1px; left: 30%; right: 30%; height: 1px; |
| background: linear-gradient(90deg, transparent, var(--cyan), transparent); |
| border-radius: 999px; |
| } |
| .card:hover { |
| transform: translateY(-3px); |
| border-color: rgba(0, 240, 255, 0.28); |
| box-shadow: |
| 0 16px 50px rgba(0,0,0,0.5), |
| 0 0 0 1px rgba(0,240,255,0.1), |
| inset 0 1px 0 rgba(255,255,255,0.1); |
| } |
|
|
| |
| |
| |
| .metric-card { |
| background: rgba(255,255,255,0.03); |
| border: 1px solid rgba(255,255,255,0.07); |
| border-radius: 18px; |
| padding: 1.5rem; |
| text-align: center; |
| transition: all 0.3s ease; |
| } |
| .metric-card:hover { |
| background: rgba(0,240,255,0.06); |
| border-color: rgba(0,240,255,0.2); |
| transform: translateY(-2px); |
| } |
| .metric-value { |
| font-family: 'Syne', sans-serif; |
| font-size: 2rem; |
| font-weight: 700; |
| background: linear-gradient(135deg, var(--cyan), var(--blue)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| .metric-label { |
| font-size: 0.75rem; |
| color: var(--muted); |
| letter-spacing: 0.6px; |
| text-transform: uppercase; |
| margin-top: 0.3rem; |
| } |
|
|
| |
| |
| |
| .badge-live { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| background: rgba(0,240,255,0.1); |
| border: 1px solid rgba(0,240,255,0.25); |
| border-radius: 999px; |
| padding: 5px 14px; |
| font-size: 0.78rem; |
| color: var(--cyan); |
| font-weight: 500; |
| } |
| .badge-live::before { |
| content: ''; |
| width: 6px; height: 6px; |
| border-radius: 50%; |
| background: var(--cyan); |
| animation: pulse 1.8s ease-in-out infinite; |
| } |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.25; } |
| } |
|
|
| |
| |
| |
| .price-result { |
| background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(0,240,255,0.08)); |
| border: 1px solid rgba(16,185,129,0.3); |
| border-radius: 18px; |
| padding: 2rem; |
| text-align: center; |
| margin-top: 1rem; |
| animation: fadeUp 0.5s cubic-bezier(.22,1,.36,1) both; |
| } |
| .price-label { |
| font-size: 0.75rem; |
| color: #6ee7b7; |
| text-transform: uppercase; |
| letter-spacing: 0.7px; |
| margin-bottom: 10px; |
| } |
| .price-value { |
| font-family: 'Syne', sans-serif; |
| font-size: 2.6rem; |
| font-weight: 800; |
| background: linear-gradient(135deg, #4ade80, var(--green)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| .price-sub { |
| color: #6ee7b7; |
| font-size: 0.82rem; |
| margin-top: 6px; |
| opacity: 0.7; |
| } |
|
|
| |
| .breakdown-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 10px 14px; |
| border-radius: 10px; |
| background: rgba(255,255,255,0.03); |
| border: 1px solid var(--border); |
| font-size: 0.875rem; |
| margin-top: 8px; |
| color: #cbd5e1; |
| } |
| .breakdown-row strong { color: #fff; font-weight: 600; } |
|
|
| |
| |
| |
| .stTextInput > div > div > input, |
| .stNumberInput > div > div > input, |
| .stTextArea textarea, |
| .stSelectbox > div > div { |
| background: rgba(255,255,255,0.05) !important; |
| color: #f1f5f9 !important; |
| border-radius: 12px !important; |
| border: 1px solid rgba(255,255,255,0.1) !important; |
| padding: 0.75rem 1rem !important; |
| font-size: 0.95rem !important; |
| font-family: 'DM Sans', sans-serif !important; |
| transition: border-color 0.25s ease, box-shadow 0.25s ease !important; |
| } |
| .stTextInput > div > div > input:focus, |
| .stNumberInput > div > div > input:focus, |
| .stTextArea textarea:focus { |
| border-color: var(--cyan) !important; |
| box-shadow: |
| 0 0 0 3px rgba(0,240,255,0.12), |
| 0 0 20px rgba(0,240,255,0.07) !important; |
| outline: none !important; |
| } |
| .stTextInput label, |
| .stNumberInput label, |
| .stTextArea label, |
| .stSelectbox label { |
| font-size: 0.75rem !important; |
| font-weight: 600 !important; |
| color: #94a3b8 !important; |
| letter-spacing: 0.7px !important; |
| text-transform: uppercase !important; |
| margin-bottom: 0.4rem !important; |
| } |
|
|
| |
| .stSelectbox > div > div > div { |
| color: #f1f5f9 !important; |
| } |
| [data-baseweb="select"] ul { |
| background: #0d1526 !important; |
| border: 1px solid rgba(255,255,255,0.1) !important; |
| border-radius: 12px !important; |
| } |
| [data-baseweb="select"] li:hover { |
| background: rgba(0,240,255,0.08) !important; |
| } |
|
|
| |
| |
| |
| .stButton > button { |
| position: relative; |
| overflow: hidden; |
| background: linear-gradient(135deg, #00cfe8, var(--blue)) !important; |
| color: #ffffff !important; |
| border: none !important; |
| border-radius: 13px !important; |
| padding: 0.78rem 2rem !important; |
| font-size: 0.95rem !important; |
| font-weight: 700 !important; |
| font-family: 'Syne', sans-serif !important; |
| letter-spacing: 0.3px !important; |
| cursor: pointer; |
| transition: all 0.3s ease !important; |
| width: 100% !important; |
| } |
| .stButton > button:hover { |
| transform: translateY(-2px) !important; |
| box-shadow: 0 10px 32px rgba(0,207,232,0.38) !important; |
| } |
| .stButton > button:active { |
| transform: scale(0.98) !important; |
| } |
|
|
| |
| |
| |
| section[data-testid="stSidebar"] { |
| background: rgba(6,9,24,0.96) !important; |
| backdrop-filter: blur(20px) !important; |
| border-right: 1px solid rgba(255,255,255,0.07) !important; |
| } |
| section[data-testid="stSidebar"] .stRadio label, |
| section[data-testid="stSidebar"] p { |
| color: #94a3b8 !important; |
| } |
| section[data-testid="stSidebar"] .stRadio label:hover { |
| color: var(--cyan) !important; |
| } |
| section[data-testid="stSidebar"] .stButton > button { |
| background: rgba(239,68,68,0.1) !important; |
| border: 1px solid rgba(239,68,68,0.3) !important; |
| color: #fca5a5 !important; |
| border-radius: 10px !important; |
| } |
| section[data-testid="stSidebar"] .stButton > button:hover { |
| background: rgba(239,68,68,0.2) !important; |
| } |
|
|
| |
| |
| |
| .stDataFrame, iframe[title="st.dataframe"] { |
| background: rgba(255,255,255,0.03) !important; |
| border: 1px solid rgba(255,255,255,0.08) !important; |
| border-radius: 14px !important; |
| overflow: hidden; |
| } |
| .stDataFrame thead tr th { |
| background: rgba(255,255,255,0.05) !important; |
| color: #94a3b8 !important; |
| font-size: 0.75rem !important; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| .stDataFrame tbody tr:hover { |
| background: rgba(0,240,255,0.04) !important; |
| } |
|
|
| |
| |
| |
| .stSuccess, .stInfo, .stWarning, .stError { |
| border-radius: 12px !important; |
| backdrop-filter: blur(12px) !important; |
| border-left-width: 3px !important; |
| } |
| .stSuccess { background: rgba(16,185,129,0.1) !important; border-color: #10b981 !important; } |
| .stInfo { background: rgba(59,130,246,0.1) !important; border-color: var(--blue) !important; } |
| .stWarning { background: rgba(245,158,11,0.1) !important; border-color: var(--amber) !important; } |
| .stError { background: rgba(239,68,68,0.1) !important; border-color: #ef4444 !important; } |
|
|
| |
| |
| |
| .stProgress > div > div { |
| background: rgba(255,255,255,0.07) !important; |
| border-radius: 999px !important; |
| } |
| .stProgress > div > div > div { |
| background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple)) !important; |
| border-radius: 999px !important; |
| box-shadow: 0 0 14px rgba(0,240,255,0.4) !important; |
| } |
|
|
| |
| |
| |
| .stTabs [data-baseweb="tab-list"] { |
| background: rgba(255,255,255,0.04) !important; |
| border-radius: 12px !important; |
| padding: 4px !important; |
| gap: 4px !important; |
| } |
| .stTabs [data-baseweb="tab"] { |
| border-radius: 10px !important; |
| color: #64748b !important; |
| font-weight: 500 !important; |
| transition: all 0.2s ease !important; |
| } |
| .stTabs [aria-selected="true"] { |
| background: linear-gradient(135deg, rgba(0,240,255,0.15), rgba(59,130,246,0.15)) !important; |
| color: var(--cyan) !important; |
| border: 1px solid rgba(0,240,255,0.2) !important; |
| } |
|
|
| |
| |
| |
| hr { |
| border: none !important; |
| border-top: 1px solid rgba(255,255,255,0.08) !important; |
| margin: 2rem 0 !important; |
| } |
|
|
| |
| |
| |
| ::-webkit-scrollbar { width: 6px; height: 6px; } |
| ::-webkit-scrollbar-track { background: transparent; } |
| ::-webkit-scrollbar-thumb { |
| background: linear-gradient(180deg, var(--cyan), var(--blue)); |
| border-radius: 999px; |
| } |
