@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;
    --purp:#474BFF;
    --grn:#57F2B1;
    --primary:#474BFF; --primary-600:#3f43f0; --primary-700:#3236d0;
    --bg-900:#0b0c12; --bg-800:#0f1220; --card:#161823;
    --text:#eef1ff; --muted:#b6b9d3; --ring: rgba(71,75,255,.45);
    --shadow: 0 10px 30px rgba(0,0,0,.45); --border: rgba(255,255,255,.08);
}
html{overflow:hidden}
p{margin:0}
button,a,input[type=submit]{cursor:pointer}

input,button{outline:none;border:0}
hr{margin:.6rem .5rem;border-color:#ccc}
a{text-decoration:none;color:inherit;outline:none}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%, rgb(71 75 255 / 40%), #ffffff00 60%), radial-gradient(900px 500px at -10% 10%, rgb(71 75 255 / 25%), #ffffff00 60%), linear-gradient(180deg, #ffffff 0%, #000000 100%);
    color:#000;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}
main:has(.container){overflow:scroll}
main{ padding:1.5rem 5rem 60px; background:#fff;border-top-right-radius: 2rem; border-top-left-radius: 2rem; }


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{margin:1rem auto 2rem;position:sticky;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}

.form-card{max-width:400px;margin:5rem auto 0;background:var(--tint);padding:2rem;border-radius:8px;display:flex;flex-direction:column;gap:1rem}
.form-card label{display:flex;flex-direction:column;gap:.2rem}
.table-container{margin:auto;padding-top:2rem;overflow-x:auto}
.stock-table{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:2rem;color:#fff;border-radius:8px;overflow:hidden}
.stock-table th,.stock-table td{padding:.6rem .8rem;text-align:left}
.stock-table th{background:var(--purple);text-align:left}
.stock-search{margin-bottom:1rem;padding:.4rem 1rem;border-radius:4px;background:var(--semi);color:#fff;width:100%;max-width:300px}
.stock-update-form{display:flex;gap:.5rem;align-items:center}
.upload-form,.add-item-form{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem}
.stock-update-form input[type=number],.add-item-form input[type=number]{width:100px;background:var(--tint);color:#fff;border:1px solid var(--purple-tint);border-radius:4px;padding:.2rem}
.error{color:#ff4d4d}
.success{color:var(--green)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}