@font-face{font-family:'pjs';src:url(pjs.v1.woff2)}

:root{
    --purple:#474bff;
    --purple-tint:#3b3bbe;
    --green:#4bd37b;
    --green-tint:#355840;
    --green-bg:#203427;
    --tint:#2f2f34;
    --mid:#242529;
    --semi:#1b1c1f;
}
p{margin:0}
button,a,input[type=submit]{cursor:pointer}
#topbar{background:#292b7f}
input,button{outline:none;border:0}
hr{margin:.6rem .5rem;border-color:#ccc}
main{padding:2rem 2rem 1rem;overflow-y:auto;height:100%}
a{text-decoration:none;color:inherit;outline:none}
body{height:100vh;position:fixed;width:100vw;margin:0;background:var(--mid);color:#fff;display:flex;flex-direction:column}
button,a,h1,h2,h3,h4,h5,h6,p,span,div,caption,summary,header,th,td,input{font-family:"pjs",sans-serif}
html[data-scroll="1"] nav{margin-top:-52px}
#topbar>nav{transition:margin 1s ease;background:#474bff;height:52px;width:100%;color:#fff;display:flex;box-shadow:0 1px 2px #0005;box-sizing:border-box;padding:0 10%;position:relative}
#topbar>nav>a{text-transform:capitalize;font-size:.9rem;font-weight:400;align-self:center;padding:.6rem 1rem .6rem;position:relative;margin:.3rem}
#topbar>nav>a.a{font-weight:700;color:#fff;background:#0003;border-radius:.5rem;box-shadow:inset 0 0 4px #0004}
#topbar>nav>svg{height:24px;width:24px;margin:auto 0}
#topbar>nav>svg:first-of-type{margin-right:auto}
#topbar>nav>svg:last-of-type{margin-left:auto}
#navSlider{position:absolute;bottom:0;left:0;height:1.5px;background:#fff;width:0;transform:translateX(0);transition:transform .3s ease,width .3s ease}
#topbar>header{justify-content:space-between;position:relative;white-space:nowrap;height:48px;box-shadow: 0 1px 2px #0007;background:var(--purple-tint);display:flex;padding:0 10%;font-size:.8rem;overflow-x:auto;overflow-y:hidden}
#topbar>header p{margin:1em 1em 1em auto}
#topbar>header form{display:flex;align-items:center;width:100%}
#topbar>header form input{color:#fff;border:none;flex:1;padding:.4rem 1rem;background:#32319a;border-radius:.5rem}
#topbar>header .profile{display:flex;align-items:center;gap:.5rem;margin-right:auto;font-weight:600;color:#fff}
#topbar>header .avatar{background:var(--purple);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.9rem}
#topbar>header a{position:relative;align-self:center;padding:0 1rem;color:#ccc}
#topbar>header a.a{font-weight:600;color:#fff}
#topbar>header a .count{margin-left:.5rem;box-shadow:0 0 4px #0006;color:#fffe;background:var(--purple);border-radius:1rem;padding:.2rem .7rem}
#topbar>header>a:first-of-type{margin-left:.5rem}
#topbar>header a:last-child{padding-right:0}
#topbar>header>a:last-of-type{padding-right:0}
#topbar>header>svg{display:none}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button {-webkit-appearance:none;margin:0}
#profileOverlay{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s}
#profileOverlay.open{opacity:1;pointer-events:auto}
#profilePopup{background:var(--tint);border-radius:12px;width:90vw;max-width:520px;max-height:90vh;padding:2rem;position:relative;display:flex;flex-direction:column;box-shadow:0 4px 20px #0009}
#profilePopup iframe{flex:1;border:0;width:100%;height:100%}
#profilePopup .profileSummary{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
#profilePopup .profileSummary .avatar{background:var(--purple);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:600;color:#fff}
#profilePopup .profileSummary .name{font-weight:600;font-size:1rem}
#profileTabs{display:flex;justify-content:center;gap:.5rem;margin-bottom:1rem}
#profileTabs button{background:var(--semi);border:0;color:#fff;padding:.4rem 1rem;border-radius:20px;cursor:pointer;opacity:.7}
#profileTabs button.active{background:var(--purple);opacity:1}
#closeProfile{position:absolute;top:.5rem;right:.5rem;cursor:pointer;color:#fff;width:24px;height:24px}
#logoutLink{display:block;margin-top:1rem;text-align:center;color:#fff}
#logoutLink:hover{text-decoration:underline}
#showCreateDeal{display:block;margin:1rem auto 2rem;position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--purple);border:0;border-radius: 2rem;padding: 1rem 2rem;font-size: 1rem;color:#fff;font-weight: 500}
input[type=number]{-moz-appearance:textfield;-webkit-appearance:none;appearance:none}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#profilePopup h2{margin-top:0;margin-bottom:1rem;font-size:1.2rem;text-align:center}
#profilePopup form{display:flex;flex-direction:column;gap:.6rem;padding-right:.5rem}
#profileForm{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;padding-right:.5rem}
#profileForm label:nth-child(3){grid-column:1/3}
#profileForm button{grid-column:1/3;margin-top:.5rem}
#passwordForm{margin-top:1.2rem;display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
#passwordForm button{grid-column:1/3;margin-top:.5rem}
#bankForm{margin-top:1.2rem;display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
#bankForm label:first-child{grid-column:1/3}
#bankForm label:nth-child(4){grid-column:1/3}
#bankForm button{grid-column:1/3;margin-top:.5rem}
#profilePopup label{display:flex;flex-direction:column;font-size:.85rem;gap:.2rem}
#profilePopup input{padding:.4rem;border-radius:4px;background:var(--semi);color:#fff}
#profilePopup select{padding:.4rem;border-radius:4px;background:var(--semi);color:#fff}
#profilePopup button{padding:.5rem;border-radius:4px;background:var(--purple);color:#fff}