/* =====================================================
   STOCK-MARKET.ONLINE
   PROFESSIONAL MASTER STYLESHEET
   Version 2.0
===================================================== */

/* ======================
RESET
====================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

    background:#0f172a;

    color:#ffffff;

    overflow-x:hidden;

    line-height:1.5;

}

/* ======================
COLORS
====================== */

:root{

--primary:#2563eb;
--primary-hover:#1d4ed8;

--success:#16a34a;
--danger:#dc2626;
--warning:#f59e0b;

--bg:#0f172a;
--card:#111827;
--card2:#1f2937;

--border:rgba(255,255,255,.06);

--text:#ffffff;
--muted:#94a3b8;

--radius:18px;

--shadow:
0 10px 30px rgba(0,0,0,.18);

}

/* ======================
LINKS
====================== */

a{

color:inherit;

text-decoration:none;

transition:.25s;

}

img{

display:block;

max-width:100%;

height:auto;

}

button{

font-family:inherit;

cursor:pointer;

transition:.25s;

border:none;

outline:none;

}

/* ======================
SCROLLBAR
====================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111827;

}

::-webkit-scrollbar-thumb{

background:#334155;

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:#475569;

}

/* ======================
LAYOUT
====================== */

.sidebar{

position:fixed;

left:0;

top:0;

width:270px;

height:100vh;

background:#0b1220;

border-right:1px solid rgba(255,255,255,.06);

display:flex;

flex-direction:column;

padding:22px 18px;

overflow-y:auto;

z-index:999;

}

.content{

margin-left:270px;

padding:35px;

min-height:100vh;

background:#0f172a;

}

/* ======================
LOGO
====================== */

/* ==========================================
   PROFESSIONAL SIDEBAR LOGO
========================================== */

.logo{

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

padding:12px 0 22px;

margin-bottom:18px;

border-bottom:1px solid rgba(255,255,255,.05);

}

.logo img{

width:58px;
height:58px;

object-fit:contain;

transition:.35s ease;

filter:drop-shadow(0 6px 14px rgba(37,99,235,.18));

}

.logo img:hover{

transform:scale(1.08);

}

.logo::after{

content:"Stock Investment";

margin-top:10px;

font-size:18px;

font-weight:700;

letter-spacing:-0.3px;

color:#ffffff;

}

.logo::before{

content:"MARKETS • DATA • INSIGHTS";

order:3;

margin-top:4px;

font-size:10px;

letter-spacing:2px;

color:#64748b;

text-transform:uppercase;

}

/* ======================
SUPPORT
====================== */

.support{

background:#121b2d;

border:1px solid rgba(255,255,255,.05);

border-radius:14px;

padding:14px;

margin:16px 0 26px;

text-align:center;

font-size:14px;

color:#94a3b8;

box-shadow:0 8px 20px rgba(0,0,0,.15);

}

/* ======================
MENU
====================== */

.menu{

list-style:none;

padding:0;

margin:0;

display:flex;

flex-direction:column;

gap:8px;

}

.menu li{

margin-bottom:8px;

}

.menu a{

display:flex;

align-items:center;

gap:14px;

padding:14px 18px;

border-radius:12px;

font-size:15px;

color:#dbe4ee;

}

.menu a:hover{

background:#1f2937;

color:#ffffff;

}

.menu a.active{

background:var(--primary);

color:#ffffff;

}

.menu i{

font-size:18px;

min-width:20px;

}

/* ======================
HEADINGS
====================== */

h1{

font-size:34px;

font-weight:700;

margin-bottom:8px;

}

h2{

font-size:26px;

font-weight:700;

}

h3{

font-size:20px;

font-weight:600;

}

p{

color:var(--muted);

font-size:15px;

}

/* ======================
UTILITIES
====================== */

.green{

color:var(--success);

}

.red{

color:var(--danger);

}

.text-center{

text-align:center;

}

.mt-20{

margin-top:20px;

}

.mb-20{

margin-bottom:20px;

}

/* =====================================================
   DASHBOARD
===================================================== */

.dashboard-header{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-bottom:35px;

flex-wrap:wrap;

}

.dashboard-title h1{

margin-bottom:8px;

}

.dashboard-title p{

font-size:15px;

color:var(--muted);

}

/* =====================================================
   SUMMARY CARDS
===================================================== */

.dashboard-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:22px;

margin-bottom:35px;

}

.card-box:hover{

transform:translateY(-5px);

border-color:var(--primary);

}

.card-title{

font-size:13px;

text-transform:uppercase;

letter-spacing:1px;

color:var(--muted);

margin-bottom:15px;

}

.card-value{

font-size:34px;

font-weight:700;

color:#ffffff;

line-height:1.1;

}

.card-subtitle{

margin-top:12px;

font-size:14px;

color:var(--muted);

}

.card-change{

margin-top:14px;

font-size:15px;

font-weight:600;

}

/* =====================================================
   TABLE CARD
===================================================== */

.table-card{

background:var(--card);

border-radius:var(--radius);

border:1px solid var(--border);

padding:26px;

margin-bottom:28px;

box-shadow:var(--shadow);

}

.section-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:22px;

gap:20px;

flex-wrap:wrap;

}

.section-header h2{

font-size:24px;

margin:0;

}

/* =====================================================
   TABLE
===================================================== */

.dashboard-table{

width:100%;

border-collapse:collapse;

}

.dashboard-table thead{

background:#182334;

}

.dashboard-table th{

padding:16px;

text-align:left;

font-size:14px;

font-weight:600;

color:#cbd5e1;

}

.dashboard-table td{

padding:16px;

border-top:1px solid rgba(255,255,255,.05);

font-size:15px;

vertical-align:middle;

}

.dashboard-table tbody tr{

transition:.25s;

}

.dashboard-table tbody tr:hover{

background:#172033;

}

/* =====================================================
   BUTTONS
===================================================== */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:14px 24px;

border-radius:12px;

font-weight:600;

font-size:15px;

transition:.25s;

}

.btn-primary{

background:var(--primary);

color:#fff;

}

.btn-primary:hover{

background:var(--primary-hover);

}

.btn-success{

background:var(--success);

color:#fff;

}

.btn-success:hover{

filter:brightness(.95);

}

.btn-danger{

background:var(--danger);

color:#fff;

}

.btn-danger:hover{

filter:brightness(.95);

}

.btn-secondary{

background:#374151;

color:#fff;

}

.btn-secondary:hover{

background:#4b5563;

}

/* =====================================================
   FORM ELEMENTS
===================================================== */

input,
select,
textarea{

width:100%;

padding:14px 16px;

background:#182334;

border:1px solid var(--border);

border-radius:12px;

color:#fff;

font-size:15px;

outline:none;

transition:.25s;

}

input:focus,
select:focus,
textarea:focus{

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

input::placeholder,
textarea::placeholder{

color:var(--muted);

}

/* =====================================================
SEARCH
===================================================== */

.search-box{

width:100%;

padding:18px 22px;

border-radius:16px;

background:var(--card);

border:1px solid var(--border);

font-size:16px;

color:#fff;

margin:25px 0 35px;

}

.search-box:focus{

border-color:var(--primary);

}

/* =====================================================
SECTION TITLE
===================================================== */

.section-title{

margin-bottom:22px;

}

.section-title h2{

margin-bottom:6px;

}

.section-title p{

font-size:15px;

}

/* =====================================================
TRENDING STOCKS
===================================================== */

.trending-row{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:22px;

margin-bottom:40px;

}

.trend-card{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

background:var(--card);

border-radius:18px;

border:1px solid var(--border);

transition:.30s;

box-shadow:var(--shadow);

}

.trend-card:hover{

transform:translateY(-6px);

border-color:var(--primary);

}

.trend-left{

display:flex;

align-items:center;

gap:16px;

}

.trend-logo{

width:62px;

height:62px;

border-radius:50%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

flex-shrink:0;

}

.trend-logo img{

width:42px;

height:42px;

object-fit:contain;

}

.trend-info h3{

margin:0;

font-size:20px;

}

.trend-info p{

margin-top:5px;

font-size:14px;

color:var(--muted);

}

.trend-right{

text-align:right;

}

.trend-right h2{

font-size:24px;

margin-bottom:8px;

}

/* =====================================================
MARKET GRID
===================================================== */

.market-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(340px,1fr));

gap:24px;

}

.stock-card{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px;

background:var(--card);

border-radius:18px;

border:1px solid var(--border);

transition:.30s;

box-shadow:var(--shadow);

}

.stock-card:hover{

transform:translateY(-6px);

border-color:var(--primary);

}

.stock-left{

display:flex;

align-items:center;

gap:18px;

}

.stock-logo{

width:70px;

height:70px;

border-radius:50%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

flex-shrink:0;

}

.stock-logo img{

width:48px;

height:48px;

object-fit:contain;

}

.stock-details{

display:flex;

flex-direction:column;

}

.stock-symbol{

font-size:22px;

font-weight:700;

}

.stock-company{

font-size:15px;

margin-top:5px;

color:var(--muted);

}

.stock-sector{

margin-top:5px;

font-size:13px;

color:#64748b;

}

.stock-right{

text-align:right;

}

.stock-price{

font-size:28px;

font-weight:700;

margin-bottom:10px;

}

.gain,
.loss{

display:inline-block;

padding:6px 14px;

border-radius:30px;

font-size:14px;

font-weight:600;

color:#fff;

}

.gain{

background:var(--success);

}

.loss{

background:var(--danger);

}

/* =====================================================
   PORTFOLIO
===================================================== */

.portfolio-header{

display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:30px;
flex-wrap:wrap;

}

.portfolio-summary{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-bottom:35px;

}

.portfolio-card{

background:var(--card);
border:1px solid var(--border);
border-radius:18px;
padding:22px;
box-shadow:var(--shadow);
transition:.30s;

}

.portfolio-card:hover{

transform:translateY(-5px);
border-color:var(--primary);

}

.portfolio-card h4{

font-size:13px;
text-transform:uppercase;
letter-spacing:1px;
color:var(--muted);
margin-bottom:14px;

}

.portfolio-card h2{

font-size:32px;
font-weight:700;

}

.portfolio-profit{

color:var(--success);

}

.portfolio-loss{

color:var(--danger);

}

/* =====================================================
   HOLDINGS
===================================================== */

.holding-card{

display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:var(--card);
border:1px solid var(--border);
border-radius:18px;
margin-bottom:18px;
transition:.30s;

}

.holding-card:hover{

transform:translateY(-4px);
border-color:var(--primary);

}

.holding-left{

display:flex;
align-items:center;
gap:18px;

}

.holding-logo{

width:60px;
height:60px;
background:#ffffff;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;

}

.holding-logo img{

width:42px;
height:42px;
object-fit:contain;

}

.holding-right{

text-align:right;

}

.holding-value{

font-size:24px;
font-weight:700;

}

/* =====================================================
   WATCHLIST
===================================================== */

.watchlist-grid{

display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:22px;

}

.watch-card{

background:var(--card);
border-radius:18px;
border:1px solid var(--border);
padding:22px;
transition:.30s;
box-shadow:var(--shadow);

}

.watch-card:hover{

transform:translateY(-5px);
border-color:var(--primary);

}

.watch-header{

display:flex;
align-items:center;
gap:15px;
margin-bottom:18px;

}

.watch-header img{

width:48px;
height:48px;
object-fit:contain;
background:#fff;
border-radius:50%;
padding:5px;

}

.watch-price{

font-size:28px;
font-weight:700;
margin-top:12px;

}

/* =====================================================
   TRANSACTIONS
===================================================== */

.transaction-badge{

padding:6px 14px;
border-radius:30px;
font-size:13px;
font-weight:600;
display:inline-block;

}

.badge-buy{

background:#16a34a;
color:#fff;

}

.badge-sell{

background:#dc2626;
color:#fff;

}

.badge-pending{

background:#f59e0b;
color:#fff;

}

.badge-completed{

background:#2563eb;
color:#fff;

}

/* =====================================================
   PERFORMANCE
===================================================== */

.performance-up{

color:#22c55e;
font-weight:700;

}

.performance-down{

color:#ef4444;
font-weight:700;

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:992px){

.portfolio-summary{

grid-template-columns:repeat(2,1fr);

}

.watchlist-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.portfolio-summary{

grid-template-columns:1fr;

}

.holding-card{

flex-direction:column;
align-items:flex-start;
gap:18px;

}

.holding-right{

width:100%;
text-align:left;

}

.dashboard-table{

display:block;
overflow-x:auto;
white-space:nowrap;

}

}

@media(max-width:500px){

.portfolio-card{

padding:18px;

}

.portfolio-card h2{

font-size:26px;

}

.holding-logo{

width:52px;
height:52px;

}

.holding-logo img{

width:36px;
height:36px;

}

.watch-price{

font-size:24px;

}

}

/* ==========================================
QUICK ACTIONS
========================================== */

.quick-actions{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

gap:18px;

}

.action-card{

background:#111827;

border:1px solid rgba(255,255,255,.06);

border-radius:18px;

padding:26px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:15px;

transition:.30s;

color:#fff;

text-decoration:none;

}

.action-card:hover{

background:#1e293b;

transform:translateY(-6px);

border-color:#2563eb;

}

.action-card i{

font-size:34px;

color:#38bdf8;

}

.action-card span{

font-size:15px;

font-weight:600;

text-align:center;

}

@media(max-width:768px){

.quick-actions{

grid-template-columns:repeat(2,1fr);

}

.action-card{

padding:20px;

}

.action-card i{

font-size:28px;

}

}

/* ==========================================
TABLE RESPONSIVE
========================================== */

.table-responsive{

width:100%;

overflow-x:auto;

overflow-y:hidden;

border-radius:18px;

}

.dashboard-holdings{

min-width:850px;

}

.dashboard-table img{

width:42px;

height:42px;

border-radius:50%;

background:#ffffff;

padding:5px;

object-fit:contain;

}

.dashboard-table td{

vertical-align:middle;

}

.dashboard-table strong{

font-size:15px;

}

.dashboard-table small{

color:#94a3b8;

font-size:13px;

}

@media(max-width:768px){

.dashboard-holdings{

min-width:720px;

}

}

/* ==========================================
RECENT TRANSACTIONS
========================================== */

.dashboard-transactions{

min-width:900px;

}

.dashboard-transactions tbody tr{

transition:.30s;

}

.dashboard-transactions tbody tr:hover{

background:#172033;

}

.dashboard-transactions td{

padding:18px 16px;

}

.transaction-buy{

display:inline-flex;

align-items:center;

gap:6px;

padding:6px 14px;

border-radius:30px;

background:#16a34a;

color:#fff;

font-size:13px;

font-weight:600;

}

.transaction-sell{

display:inline-flex;

align-items:center;

gap:6px;

padding:6px 14px;

border-radius:30px;

background:#dc2626;

color:#fff;

font-size:13px;

font-weight:600;

}

@media(max-width:768px){

.dashboard-transactions{

min-width:760px;

}

}

/* ==========================================
WATCHLIST
========================================== */

.dashboard-watchlist{

min-width:760px;

}

.dashboard-watchlist tbody tr{

transition:.30s;

}

.dashboard-watchlist tbody tr:hover{

background:#172033;

}

.dashboard-watchlist td{

padding:18px 16px;

vertical-align:middle;

}

.dashboard-watchlist .stock-logo{

width:42px;

height:42px;

background:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.dashboard-watchlist .stock-logo img{

width:30px;

height:30px;

object-fit:contain;

}

@media(max-width:768px){

.dashboard-watchlist{

min-width:700px;

}

}

/* ==========================================
MARKET NEWS
========================================== */

.news-list{

display:flex;

flex-direction:column;

gap:16px;

}

.news-item{

padding:18px;

background:#111827;

border:1px solid rgba(255,255,255,.06);

border-radius:16px;

transition:.25s;

}

.news-item:hover{

border-color:#2563eb;

transform:translateY(-2px);

}

.news-item h4{

font-size:16px;

margin-bottom:8px;

line-height:1.5;

}

.news-item h4 a{

color:#ffffff;

text-decoration:none;

}

.news-item h4 a:hover{

color:#60a5fa;

}

.news-item p{

font-size:13px;

color:#94a3b8;

}

/* ==========================================
SUMMARY CARD TEXT
========================================== */

.summary-card p{

margin-top:10px;

font-size:13px;

color:#94a3b8;

}

/* ==========================================
   PROFESSIONAL DASHBOARD HEADER
========================================== */

.market-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:25px;
    margin-bottom:35px;
    flex-wrap:wrap;
}

.welcome-area h1{
    font-size:34px;
    font-weight:700;
    color:#ffffff;
    margin:0;
}

.welcome-area{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:linear-gradient(135deg,#182133,#101827);

    border:1px solid rgba(255,255,255,.05);

    border-radius:22px;

    padding:30px;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.welcome-area p{
    margin-top:8px;
    color:#9ca3af;
    font-size:15px;
}

.market-summary{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    width:100%;

    margin-top:25px;

    align-items:stretch;

}

.summary-card{

    background:linear-gradient(180deg,#182133,#111827);

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:24px;

    min-height:145px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    transition:.35s;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

}

.summary-card:hover{

    transform:translateY(-6px);

    border-color:#2563eb;

    box-shadow:0 18px 35px rgba(37,99,235,.18);

}

.summary-card h4{

    font-size:13px;

    color:#94a3b8;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:12px;

    font-weight:600;

}

.summary-card h2{

    font-size:32px;

    font-weight:700;

    color:#ffffff;

    margin:0;

    line-height:1.1;

}

.summary-card small{

    display:block;

    margin-top:10px;

    color:#64748b;

}

.market-open{

    color:#22c55e !important;

}

@media(max-width:1200px){

.market-summary{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.market-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:25px;
    margin-bottom:35px;
    flex-wrap:wrap;
}

.market-summary{

grid-template-columns:1fr;

}

.welcome-area h1{

    font-size:38px;

    font-weight:700;

    color:#ffffff;

    margin:0;

    line-height:1.2;

}

.summary-card h2{

    font-size:32px;

    font-weight:700;

    color:#ffffff;

    margin:0;

    line-height:1.1;

}

}

/* ==========================================
LIVE MARKET STRIP
========================================== */

.live-market-strip{

margin-bottom:30px;

overflow:hidden;

background:#101827;

border-radius:18px;

border:1px solid rgba(255,255,255,.05);

}

.ticker-wrapper{

display:flex;

gap:18px;

padding:18px;

animation:tickerMove 30s linear infinite;

width:max-content;

}

.live-market-strip:hover .ticker-wrapper{

animation-play-state:paused;

}

.ticker-item{

min-width:180px;

background:#182133;

padding:16px;

border-radius:12px;

text-align:center;

}

.ticker-item strong{

display:block;

font-size:16px;

color:#fff;

margin-bottom:6px;

}

.ticker-item span{

display:block;

font-size:22px;

font-weight:700;

color:#ffffff;

}

.ticker-item small{

display:block;

margin-top:8px;

font-size:14px;

}

.gain{

color:#22c55e;

}

.loss{

color:#ef4444;

}

@keyframes tickerMove{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

.card-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#94a3b8;
    margin-bottom:15px;
}

.card-title i{
    color:#38bdf8;
    font-size:16px;
}

.card-value{
    font-size:36px;
    font-weight:700;
    line-height:1.1;
    margin-bottom:12px;
}

.card-box{
    background:linear-gradient(180deg,#182133,#111827);
    border-radius:20px;
    border:1px solid rgba(255,255,255,.06);
    padding:28px;
    transition:.35s;
}

.card-box:hover{
    transform:translateY(-8px);
    border-color:#2563eb;
    box-shadow:0 20px 40px rgba(37,99,235,.18);
}

.dashboard-overview{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:24px;
    margin-bottom:35px;
}

@media (max-width:1200px){
    .dashboard-overview{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:768px){
    .dashboard-overview{
        grid-template-columns:1fr;
    }
}

.section-header h2 i{

    color:#38bdf8;
    margin-right:10px;

}

.section-header p{

    margin-top:6px;
    color:#94a3b8;
    font-size:14px;

}

.table-card{

    background:linear-gradient(180deg,#182133,#111827);

}

.table-card .btn{

    padding:10px 18px;
    font-size:14px;

}

/* ===== Holdings Status Badge ===== */

.badge-up{

display:inline-flex;

align-items:center;

justify-content:center;

padding:7px 14px;

background:#16a34a;

color:#fff;

font-size:13px;

font-weight:600;

border-radius:30px;

}

.badge-down{

display:inline-flex;

align-items:center;

justify-content:center;

padding:7px 14px;

background:#dc2626;

color:#fff;

font-size:13px;

font-weight:600;

border-radius:30px;

}

/* Better Table */

.dashboard-holdings tbody tr{

transition:.3s;

}

.dashboard-holdings tbody tr:hover{

background:#1b2738;

transform:scale(1.01);

}

.dashboard-holdings td{

padding:20px 18px;

}

.dashboard-holdings strong{

font-size:16px;

color:#fff;

}

.dashboard-holdings small{

font-size:13px;

color:#94a3b8;

}

/* ===============================
   Stock Action Buttons
================================ */

.stock-actions{

    display:flex;

    gap:18px;

    margin:30px 0;

    flex-wrap:wrap;

}

.stock-actions .action-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:180px;

    padding:16px 28px;

    border-radius:14px;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

    color:#fff;

    transition:.25s ease;

}

.stock-actions .action-btn i{

    font-size:22px;

}

.buy-btn{

    background:#16a34a;

}

.buy-btn:hover{

    background:#15803d;

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(22,163,74,.35);

}

.sell-btn{

    background:#dc2626;

}

.sell-btn:hover{

    background:#b91c1c;

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(220,38,38,.35);

}

.watch-btn{

    background:#2563eb;

}

.watch-btn:hover{

    background:#1d4ed8;

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(37,99,235,.35);

}

/* =====================================================
   STOCK DETAILS PAGE
===================================================== */

.stock-details-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:25px;
    margin-top:25px;
}

.stock-main-card,
.stock-side-card{
    background:#111827;
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.20);
}

.stock-header{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:25px;
}

.stock-header img{
    width:72px;
    height:72px;
    background:#ffffff;
    border-radius:50%;
    padding:8px;
    object-fit:contain;
}

.stock-header h1{
    margin:0;
    font-size:32px;
}

.stock-symbol{
    color:#94a3b8;
    margin-top:5px;
}

.info-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    margin-top:25px;
}

.info-card{
    background:#1e293b;
    padding:20px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.05);
}

.info-card h4{
    color:#94a3b8;
    font-size:13px;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.info-card p{
    color:#ffffff;
    font-size:18px;
    font-weight:600;
}

.financial-table{
    width:100%;
    border-collapse:collapse;
    margin-top:25px;
}

.financial-table td{
    padding:14px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.financial-table td:first-child{
    color:#94a3b8;
    width:45%;
}

.company-description{
    margin-top:30px;
    line-height:1.8;
    color:#cbd5e1;
}

.stock-side-card h3{
    margin-bottom:20px;
}

.metric{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.metric:last-child{
    border-bottom:none;
}

.metric span{
    color:#94a3b8;
}

.metric strong{
    color:#ffffff;
}

@media(max-width:992px){

    .stock-details-grid{
        grid-template-columns:1fr;
    }

}

/* 🔥 PRICE FLASH ANIMATION */
.flash-up {
    animation: flashGreen 0.6s ease;
}

.flash-down {
    animation: flashRed 0.6s ease;
}

@keyframes flashGreen {
    0%   { background-color: rgba(34,197,94,0.6); }
    100% { background-color: transparent; }
}

@keyframes flashRed {
    0%   { background-color: rgba(239,68,68,0.6); }
    100% { background-color: transparent; }
}

.flash-green {
    animation: flashGreen 0.8s ease;
}

.flash-red {
    animation: flashRed 0.8s ease;
}

@keyframes flashGreen {
    0% { background-color: rgba(34,197,94,0.6); }
    100% { background-color: transparent; }
}

@keyframes flashRed {
    0% { background-color: rgba(239,68,68,0.6); }
    100% { background-color: transparent; }
}

.welcome-area h1{
    margin:0;
    font-size:34px;
    font-weight:700;
    color:#fff;
}

.welcome-subtitle{
    margin-top:8px;
    color:#94a3b8;
    font-size:15px;
}

#liveClock{
    margin-top:10px;
    color:#64748b;
    font-size:14px;
}

.market-overview{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:35px;

}

.market-card{

    background:linear-gradient(180deg,#182133,#111827);

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:24px;

    transition:.3s;

    box-shadow:0 15px 35px rgba(0,0,0,.2);

}

.market-card:hover{

    transform:translateY(-5px);

    border-color:#2563eb;

}

.market-card span{

    color:#94a3b8;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.market-card h2{

    margin-top:15px;

    font-size:34px;

    font-weight:700;

}

.market-card small{

    display:block;

    margin-top:12px;

    font-size:15px;

    font-weight:600;

}

.market-up{

    color:#22c55e;

}

.market-down{

    color:#ef4444;

}

@media(max-width:1000px){

.market-overview{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:700px){

.market-overview{

grid-template-columns:1fr;

}

}

.dashboard-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    margin-bottom:30px;
    overflow:hidden;
}

.welcome-panel h1{
    font-size:34px;
    font-weight:700;
    color:#fff;
    margin-bottom:10px;
}

.welcome-panel p{
    color:#94a3b8;
    margin-bottom:12px;
}

.live-clock{
    color:#38bdf8;
    font-weight:600;
}

.market-scroll{
    flex:1;
    overflow:hidden;
}

.market-scroll-track{
    display:flex;
    gap:18px;
    width:max-content;
    animation:marketTicker 25s linear infinite;
}

.market-scroll:hover .market-scroll-track{
    animation-play-state:paused;
}

.market-card{
    min-width:170px;
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.market-card span{
    color:#94a3b8;
    font-size:13px;
}

.market-card h3{
    margin:10px 0 6px;
    color:#fff;
    font-size:24px;
}

.gain{
    color:#22c55e;
}

.loss{
    color:#ef4444;
}

@keyframes marketTicker{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

@media(max-width:900px){

.dashboard-hero{
    flex-direction:column;
    align-items:flex-start;
}

.market-scroll{
    width:100%;
}

}

/* =====================================================
   BRAND MARKET WINDOW / RESPONSIVE VIEWPORT
===================================================== */

.brand-market-window{
    position:relative;
    min-height:260px;
    margin:0 0 28px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(148,163,184,.16);
    border-radius:28px;
    background:
        radial-gradient(circle at 50% 40%, rgba(37,99,235,.10), transparent 42%),
        linear-gradient(135deg, rgba(17,24,39,.88), rgba(15,23,42,.98));
    box-shadow:0 20px 50px rgba(0,0,0,.22);
    isolation:isolate;
}

.brand-watermark{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    z-index:0;
}

.brand-watermark::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(15,23,42,.92), rgba(15,23,42,.18), rgba(15,23,42,.92));
}

.brand-watermark img{
    width:min(650px,78%);
    max-height:220px;
    object-fit:contain;
    opacity:.16;
    filter:grayscale(1) brightness(2);
}

.brand-market-ticker{
    position:relative;
    z-index:2;
    width:100%;
    overflow:hidden;
    padding:18px 0;
    background:linear-gradient(90deg, transparent, rgba(15,23,42,.78) 12%, rgba(15,23,42,.78) 88%, transparent);
}

.brand-ticker-track{
    display:flex;
    width:max-content;
    gap:14px;
    animation:brandTickerMove 28s linear infinite;
}

.brand-market-ticker:hover .brand-ticker-track{
    animation-play-state:paused;
}

.brand-ticker-item{
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
    padding:12px 16px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    background:rgba(17,24,39,.82);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 20px rgba(0,0,0,.16);
}

.brand-ticker-item b{
    color:#fff;
    letter-spacing:.5px;
}

.brand-ticker-item span{
    color:#e2e8f0;
}

.brand-ticker-item em{
    font-style:normal;
    font-size:12px;
    font-weight:700;
}

@keyframes brandTickerMove{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

.mobile-header{
    display:none;
}

.mobile-menu-btn{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:#2563eb;
    color:#fff;
    font-size:26px;
    box-shadow:0 10px 24px rgba(37,99,235,.28);
}

.mobile-menu-btn:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
}

.mobile-overlay{
    display:none;
}

@media (max-width:992px){
    .mobile-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        margin-bottom:18px;
    }

    .mobile-logo img{
        width:120px;
        height:48px;
        object-fit:contain;
    }

    .mobile-user{
        font-size:28px;
        color:#cbd5e1;
    }

    .mobile-overlay{
        position:fixed;
        inset:0;
        z-index:9998;
        background:rgba(2,6,23,.68);
        backdrop-filter:blur(3px);
    }

    .mobile-overlay.active{
        display:block;
    }

    .brand-market-window{
        min-height:220px;
        border-radius:22px;
    }

    .brand-watermark img{
        width:min(520px,90%);
        max-height:180px;
    }
}

@media (max-width:576px){
    .brand-market-window{
        min-height:190px;
        margin-bottom:20px;
        border-radius:18px;
    }

    .brand-watermark img{
        width:94%;
        opacity:.13;
    }

    .brand-ticker-track{
        gap:8px;
        animation-duration:22s;
    }

    .brand-ticker-item{
        padding:9px 12px;
        gap:7px;
        font-size:12px;
    }

    .brand-ticker-item em{
        font-size:10px;
    }

    .mobile-logo img{
        width:105px;
    }

    .mobile-menu-btn{
        width:48px;
        height:48px;
    }
}

/* Personalized greeting */
.user-display-name {
    display: inline-block;
    color: #38bdf8;
    font-weight: 800;
}

#liveClock {
    display: block !important;
    margin-top: 10px;
    color: #94a3b8;
    font-size: 15px;
    font-weight: 600;
    min-height: 22px;
}

/* ===========================================
   PUBLIC SEARCH PAGE
=========================================== */

body{

    margin:0;
    padding:0;
    background:#0f172a;
    font-family:Arial, Helvetica, sans-serif;

}

.search-page{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:30px;

}

.search-page h1{

    color:#ffffff;

    font-size:48px;

    margin-bottom:10px;

    font-weight:700;

}

.search-page p{

    color:#94a3b8;

    font-size:18px;

    margin-bottom:40px;

}

.search-wrapper{

    width:100%;
    max-width:750px;

    height:70px;

    background:#1e293b;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    display:flex;

    align-items:center;

    padding:0 25px;

    transition:.3s;

}

.search-wrapper:hover{

    border-color:#2563eb;

}

.search-wrapper:focus-within{

    border-color:#2563eb;

    box-shadow:0 0 20px rgba(37,99,235,.25);

}

.search-wrapper i{

    color:#94a3b8;

    font-size:24px;

    margin-right:18px;

}

.search-wrapper input{

    flex:1;

    border:none;

    background:none;

    outline:none;

    color:#ffffff;

    font-size:22px;

}

.search-wrapper input::placeholder{

    color:#94a3b8;

}

#searchResults{

    width:100%;

    max-width:750px;

    margin-top:15px;

}

/* ===========================================
   SEARCH RESULTS
=========================================== */

#searchResults{

    background:#1e293b;

    border-radius:16px;

    overflow:hidden;

    margin-top:12px;

    border:1px solid rgba(255,255,255,.08);

    display:none;

}

.search-item{

    display:block;

    padding:18px 22px;

    text-decoration:none;

    color:#ffffff;

    transition:.25s;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.search-item:last-child{

    border-bottom:none;

}

.search-item strong{

    font-size:18px;

    display:block;

}

.search-item small{

    color:#94a3b8;

    font-size:14px;

}

.search-item:hover{

    background:#2563eb;

}

.search-item:hover small{

    color:white;

}

/* ===========================================
   SEARCH RESULT LAYOUT
=========================================== */

.search-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 22px;

}

.search-left{

    display:flex;

    align-items:center;

    gap:15px;

}

.search-logo{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    font-weight:bold;

    flex-shrink:0;

}

.search-info{

    display:flex;

    flex-direction:column;

}

.search-info strong{

    font-size:17px;

}

.search-info small{

    margin-top:3px;

}

.search-item i{

    color:#94a3b8;

    font-size:18px;

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

    .search-page{

        padding:20px;

    }

    .search-page h1{

        font-size:34px;

    }

    .search-page p{

        font-size:16px;

    }

    .search-wrapper{

        height:62px;

    }

    .search-wrapper input{

        font-size:18px;

    }

    .search-logo{

        width:42px;

        height:42px;

        font-size:16px;

    }

}

/* ===========================================
   SEARCH PRICE
=========================================== */

.search-sector{

    color:#64748b;

    font-size:13px;

    margin-top:4px;

}

.search-price{

    color:#22c55e;

    font-size:18px;

    font-weight:bold;

    white-space:nowrap;

}

@media (max-width:768px){

    .search-price{

        font-size:16px;

    }

}

/* ===========================================
   COMPANY LOGO
=========================================== */

.search-logo{

    width:52px;

    height:52px;

    border-radius:50%;

    overflow:hidden;

    background:#2563eb;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.search-logo img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.search-logo span{

    color:#fff;

    font-weight:bold;

    font-size:18px;

}

@media(max-width:768px){

    .search-logo{

        width:46px;

        height:46px;

    }

}

/* ===========================================
   STOCK RESULT PRICE BOX
=========================================== */

.search-price-box{

    text-align:right;

    min-width:120px;

}

.search-price{

    font-size:18px;

    font-weight:bold;

    color:#ffffff;

}

.search-sector{

    display:block;

    margin-top:5px;

    color:#94a3b8;

    font-size:13px;

}

.search-price-box .gain{

    margin-top:6px;

    color:#22c55e;

    font-size:14px;

    font-weight:bold;

}

.search-price-box .loss{

    margin-top:6px;

    color:#ef4444;

    font-size:14px;

    font-weight:bold;

}

@media(max-width:768px){

    .search-price-box{

        min-width:90px;

    }

    .search-price{

        font-size:16px;

    }

}

.site-notification{

position:fixed;

top:20px;

right:20px;

width:340px;

background:#111827;

color:white;

padding:20px;

border-radius:15px;

box-shadow:0 10px 30px rgba(0,0,0,.25);

z-index:999999;

animation:slideIn .4s ease;

}

.notification-title{

font-size:18px;

font-weight:bold;

margin-bottom:10px;

}

.notification-message{

font-size:14px;

line-height:1.6;

color:#cbd5e1;

margin-bottom:18px;

}

.notification-button{

background:#2563eb;

color:white;

border:none;

padding:10px 20px;

border-radius:8px;

cursor:pointer;

}

.notification-button:hover{

background:#1d4ed8;

}

.notification-close{

position:absolute;

top:10px;

right:15px;

cursor:pointer;

font-size:22px;

}

@keyframes slideIn{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@media(max-width:768px){

.site-notification{

left:15px;

right:15px;

top:15px;

width:auto;

}

}

/* =========================================
   SEARCH PAGE
========================================= */

.search-page{

    min-height:100vh;

    background:#0f172a;

    padding:80px 20px;

    text-align:center;

    color:#ffffff;

}

.search-page h1{

    font-size:42px;

    margin-bottom:12px;

    font-weight:700;

}

.search-page p{

    color:#94a3b8;

    margin-bottom:35px;

    font-size:18px;

}

.search-wrapper{

    max-width:720px;

    margin:0 auto;

    position:relative;

}

.search-wrapper i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

    font-size:20px;

}

.search-wrapper input{

    width:100%;

    padding:18px 20px 18px 54px;

    border-radius:16px;

    border:1px solid #334155;

    background:#1e293b;

    color:#ffffff;

    font-size:18px;

    outline:none;

    transition:.25s;

}

.search-wrapper input:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.18);

}

#searchResults{

    max-width:720px;

    margin:16px auto 0;

    background:#1e293b;

    border:1px solid #334155;

    border-radius:16px;

    overflow:hidden;

    display:none;

    text-align:left;

}

.search-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 18px;

    text-decoration:none;

    color:#ffffff;

    border-bottom:1px solid #334155;

    transition:.2s;

}

.search-item:last-child{

    border-bottom:none;

}

.search-item:hover{

    background:#0f172a;

}

.search-left{

    display:flex;

    align-items:center;

    gap:14px;

}

.search-logo{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    flex-shrink:0;

}

.search-logo img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.search-logo span{

    color:#0f172a;

    font-weight:700;

}

.search-info{

    display:flex;

    flex-direction:column;

    gap:2px;

}

.search-info strong{

    font-size:16px;

}

.search-info small{

    color:#94a3b8;

}

.search-sector{

    color:#64748b;

    font-size:12px;

}

.search-price{

    color:#22c55e;

    font-weight:700;

    font-size:16px;

}

@media(max-width:768px){

.search-page{

    padding:60px 16px;

}

.search-page h1{

    font-size:32px;

}

.search-wrapper input{

    font-size:16px;

    padding:16px 18px 16px 50px;

}

.search-item{

    padding:14px 16px;

}

.search-price{

    font-size:15px;

}

}

/* ===========================================
   LIVE PUBLIC STOCK SEARCH
=========================================== */

.search-empty{
    padding:20px 22px;
    color:#cbd5e1;
    font-size:15px;
    background:#1e293b;
}

.search-logo{
    position:relative;
}

.search-logo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#fff;
    border-radius:50%;
    padding:7px;
}

.search-logo span{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:800;
    font-size:16px;
    letter-spacing:.5px;
}

.search-price-box{
    text-align:right;
    min-width:150px;
}

.search-price{
    color:#fff;
    font-size:17px;
    font-weight:800;
    white-space:nowrap;
}

.search-price .gain,
.search-price .loss{
    display:block;
    margin-top:5px;
    font-size:13px;
}

.search-price .gain{
    color:#22c55e;
}

.search-price .loss{
    color:#ef4444;
}

.search-unavailable{
    color:#94a3b8;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

@media(max-width:768px){
    .search-item{
        gap:12px;
    }

    .search-price-box{
        min-width:100px;
    }

    .search-unavailable{
        white-space:normal;
        text-align:right;
    }
}

/* Stock-card identity and funding confirmation state */
.funding-lock-banner{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 0 28px;padding:20px 24px;border:1px solid rgba(59,130,246,.55);background:linear-gradient(135deg,rgba(30,64,175,.35),rgba(15,23,42,.92));border-radius:16px;box-shadow:0 12px 35px rgba(0,0,0,.18)}
.funding-lock-banner strong{font-size:18px;color:#fff}.funding-lock-banner span{display:inline-block;margin-top:6px;color:#cbd5e1;line-height:1.55}.funding-lock-button{flex:0 0 auto;padding:12px 18px;border-radius:10px;background:#2563eb;color:#fff;text-decoration:none;font-weight:700}.funding-lock-button:hover{background:#1d4ed8}.logo::after{content:""}.logo::before{content:""}
@media(max-width:760px){.funding-lock-banner{flex-direction:column;align-items:flex-start}.funding-lock-button{width:100%;text-align:center}}
.stockcard-brand{text-align:center}.stockcard-brand-name{margin-top:10px;font-size:18px;font-weight:700;letter-spacing:-.2px;color:#fff}.stockcard-brand-symbol{margin-top:5px;font-size:11px;letter-spacing:1.5px;color:#60a5fa}.stockcard-brand img{max-width:88px;max-height:88px;border-radius:16px;object-fit:contain}