@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);
    --spacing-sides: 5rem;
}
html{overflow:hidden;height:100%}
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;height:100%;min-height:0;overflow:hidden}
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}
.app-main-shell{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden;background:#fff;border-top-right-radius:2rem;border-top-left-radius:2rem}
main{flex:1;min-height:0;overflow:hidden;overflow-y:scroll;padding:1.5rem var(--spacing-sides);background:transparent;-webkit-overflow-scrolling:touch}
main>.container{display:grid;gap:16px;grid-template-columns:repeat(auto-fill, minmax(260px,1fr))}
.card{display:block;position:relative;border:1px solid #fff;border-radius:1rem;padding:.7rem;box-shadow:0 0 20px #0003;overflow:hidden;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;outline:none}

#topbar{position:sticky;top:0;z-index:60;padding:0 var(--spacing-sides)}
@media (max-width:1024px){
    :root{--spacing-sides:3.5rem}
}
@media (max-width:820px){
    :root{--spacing-sides:2.5rem}
}
@media (max-width:640px){
    :root{--spacing-sides:1.5rem}
    .app-main-shell{border-top-left-radius:1.5rem;border-top-right-radius:1.5rem}
    main{padding:1.25rem var(--spacing-sides) 2.5rem}
    main>.container{grid-template-columns:minmax(0, 1fr)}
    #topbar{padding:0 var(--spacing-sides)}
}
@media (max-width:480px){
    :root{--spacing-sides:.9rem}
    .app-main-shell{border-top-left-radius:1.1rem;border-top-right-radius:1.1rem}
    main{padding:1rem var(--spacing-sides) 2.25rem}
    #topbar{padding:0 var(--spacing-sides)}
}

#topbar nav{
    display:flex; align-items:center; gap:14px; justify-content:space-between;
    padding:12px 0;
}

#topbar nav .btf-tabs{
    display:flex; align-items:center;
    flex-wrap:nowrap;               
    overflow-x:auto; overflow-y:hidden; 
    scrollbar-gutter:stable both-edges;
    -webkit-overflow-scrolling:touch;  
    flex:1 1 auto; min-width:0;
}

#topbar nav .btf-tabs a{
    white-space:nowrap;    
    min-width:max-content;  
    flex:0 0 auto;           
}

input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button {-webkit-appearance:none;margin:0}
#profileOverlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .28s ease;background:rgba(11,12,18,.22);backdrop-filter:blur(3px)}
#profileOverlay.open{opacity:1;pointer-events:auto}
#profilePopup{border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(247 247 247 / 94%));
    box-shadow: 0 28px 60px rgba(3, 6, 17, .55), 0 0 60px rgba(71, 75, 255, .25);
    padding: clamp(26px, 3vw, 38px);width:90vw;max-width:520px;max-height:90vh;padding:2rem;position:relative;display:flex;flex-direction:column;transform:translateY(16px) scale(.98);opacity:0;transition:transform .35s cubic-bezier(.19,.82,.25,1), opacity .25s ease}
#profileOverlay.open #profilePopup{transform:none;opacity:1}
#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;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;width:24px;height:24px}
#logoutLink{display:block;margin-top:1rem;text-align:center;color:#fff}
#logoutLink:hover{text-decoration:underline}
#showCreateDeal{position:absolute;bottom:2rem;right:2rem;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}
#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}
#profilePopup select{padding:.4rem;border-radius:4px}
@media (prefers-reduced-motion: reduce){
    #profileOverlay{transition:none}
    #profilePopup{transition:none;transform:none}
}

.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}
.stock-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}
.stock-table th,.stock-table td{padding:.6rem .8rem;text-align:left}
.stock-table th{border-bottom:1px solid #ccc}
.stock-search{margin-bottom:1rem;padding:.4rem 1rem;border-radius:4px;background:var(--semi);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);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}


.cardThumbnail img{max-height:100%;max-width:100%;object-fit:contain;padding:10px;box-sizing:border-box;transition:transform .5s ease}
.card:hover .cardThumbnail img{transform:scale(1.04)}
.cardThumbnail{position:relative;aspect-ratio:3 / 4;overflow:hidden;display:flex;justify-content:center;align-items:center;height:150px;width:80%}
.cardBadges{position:absolute;top:0;left:0;width:100%;display:flex;align-items:center}
.cardHighlightBadge{font-size:.75rem;padding:.3rem .65rem;border-radius:999px;background:#00f2;font-weight:500;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}