@import url("theme.css");
@import url("layout.css");
@import url("cards.css");


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


body{

    background:
        radial-gradient(circle at top right, rgba(37,99,235,.12), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, var(--background) 100%);

    font-family:"Vazirmatn",Tahoma,sans-serif;

    color:var(--text);

    min-height:100vh;

    line-height:1.7;

}


.container{

    width:min(100%, 1480px);

    margin:auto;

    padding:18px clamp(14px, 2.5vw, 32px) 40px;

}


.green{

    color:var(--success);

}


.red{

    color:var(--danger);

}


.shadow{

    box-shadow:var(--shadow);

}


.section{

    margin-top:40px;

}


.section-title{

    font-size:34px;

    margin-bottom:18px;

    border-right:6px solid var(--primary);

    padding-right:12px;

    color:#1f2937;

}

.option-panel{

background:#ffffff;

padding:18px;

border-radius:14px;

margin-bottom:20px;

border:1px solid #e5e7eb;

box-shadow:0 3px 10px rgba(15,23,42,.06);

}

.option-row{

margin-bottom:15px;

display:flex;

flex-direction:column;

gap:6px;

}

.option-row label{

font-weight:bold;

}

.option-row input,
.option-row select{

padding:10px;

border:1px solid #ccc;

border-radius:8px;

    font:inherit;
    font-size:14px;
    min-height:44px;

}

.search-btn{

background:linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);

color:white;

border:none;

padding:12px 16px;

border-radius:10px;

cursor:pointer;

    font:inherit;
    font-size:14px;

font-weight:600;

}

.search-btn:hover{

background:#1d4ed8;

}


.custom-strategy-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
    align-items:center;
}


.custom-strategy-toolbar input,
.custom-strategy-toolbar select{
    flex:1 1 180px;
    min-height:44px;
}


.api-error-panel{
    border-right:4px solid var(--warning);
}


.api-error-panel p{
    color:var(--text-light);
    margin-top:6px;
}

.news-panel{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    box-shadow:var(--shadow);
    padding:clamp(16px, 3vw, 28px);
}

.news-panel-heading{
    align-items:flex-start;
    display:flex;
    gap:18px;
    justify-content:space-between;
    margin-bottom:22px;
}

.news-eyebrow{
    color:#0f766e;
    display:block;
    font-size:11px;
    font-weight:700;
    margin-bottom:4px;
}

.news-panel-heading h3{
    color:#1e293b;
    margin:0;
}

.news-panel-heading p{
    color:var(--text-light);
    margin:6px 0 0;
}

.news-source-count{
    background:#ecfeff;
    border-radius:999px;
    color:#0f766e;
    font-size:12px;
    padding:5px 12px;
    white-space:nowrap;
}

.news-toolbar{
    display:grid;
    gap:12px;
    grid-template-columns:minmax(220px, 1.5fr) repeat(2, minmax(150px, .75fr));
    margin-bottom:22px;
}

.news-toolbar label{
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:13px;
    font-weight:600;
}

.news-toolbar input,
.news-toolbar select{
    background:#fff;
    border:1px solid #cbd5e1;
    border-radius:9px;
    font:inherit;
    min-height:44px;
    padding:8px 12px;
}

.news-toolbar input:focus,
.news-toolbar select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(37,99,235,.12);
    outline:0;
}

.news-source-grid{
    display:grid;
    gap:14px;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}

.news-source-card{
    border:1px solid #e2e8f0;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    min-height:210px;
    padding:16px;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.news-source-card:hover{
    border-color:#99f6e4;
    box-shadow:0 8px 20px rgba(15,118,110,.1);
    transform:translateY(-2px);
}

.news-source-card-head,
.news-source-card-footer{
    align-items:center;
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.news-source-badge,
.news-source-country{
    border-radius:999px;
    font-size:10px;
    padding:3px 8px;
}

.news-source-badge{
    background:#f0fdfa;
    color:#0f766e;
}

.news-source-country{
    background:#f8fafc;
    color:#64748b;
    direction:ltr;
}

.news-source-card h3{
    color:#0f172a;
    font-size:17px;
    margin:17px 0 7px;
}

.news-source-card p{
    color:#64748b;
    direction:ltr;
    flex:1;
    font-size:12px;
    line-height:1.8;
    margin:0;
    text-align:left;
}

.news-source-card-footer{
    border-top:1px solid #eef2f7;
    color:#94a3b8;
    font-size:11px;
    margin-top:14px;
    padding-top:11px;
}

.news-source-card-footer span{
    direction:ltr;
}

.news-source-card-footer a{
    color:#0f766e;
    text-decoration:none;
}

.news-source-card-footer a:hover{
    text-decoration:underline;
}

.news-empty-state{
    border:1px dashed #cbd5e1;
    border-radius:9px;
    color:var(--text-light);
    grid-column:1 / -1;
    padding:26px;
    text-align:center;
}

.stock-panel{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:clamp(16px, 3vw, 28px);
    box-shadow:var(--shadow);
}

.stock-panel-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:22px;
}

.stock-panel-heading h3,
.stock-data-panel h3{
    margin:0;
    color:#1e293b;
}

.stock-panel-heading p{
    color:var(--text-light);
    margin:6px 0 0;
}

.stock-count{
    color:var(--primary);
    background:#eff6ff;
    border-radius:999px;
    padding:5px 12px;
    white-space:nowrap;
    font-size:13px;
}

.stock-filters{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}

.stock-filter{
    display:flex;
    flex-direction:column;
    gap:7px;
    font-weight:600;
}

.stock-filter input{
    min-height:46px;
    border:1px solid #cbd5e1;
    border-radius:9px;
    padding:8px 12px;
    background:#fff;
    font:inherit;
    color:var(--text);
}

.stock-filter input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(37,99,235,.12);
    outline:0;
}

.stock-filter input:disabled{
    background:#f8fafc;
    color:#94a3b8;
}

.stock-filter-hint{
    color:#94a3b8;
    font-size:11px;
    font-weight:400;
}

.stock-table-tabs{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
    margin:22px 0;
}

.stock-table-tab{
    border:1px solid #cbd5e1;
    background:#f8fafc;
    color:#334155;
    border-radius:9px;
    padding:11px 8px;
    font:inherit;
    cursor:pointer;
    transition:.2s ease;
}

.stock-table-tab span{
    margin-left:6px;
}

.stock-table-tab.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

.stock-table-tabs.is-disabled .stock-table-tab{
    cursor:not-allowed;
    opacity:.5;
}

.stock-data-panel{
    border-top:1px solid #e2e8f0;
    padding-top:20px;
}

.stock-table-wrap{
    overflow-x:auto;
    margin-top:12px;
}

.stock-table{
    width:100%;
    border-collapse:collapse;
    min-width:360px;
}

.stock-table th,
.stock-table td{
    border-bottom:1px solid #e2e8f0;
    padding:10px 12px;
    text-align:right;
}

.stock-table th{
    color:#475569;
    font-weight:600;
    width:55%;
}

.stock-table td{
    color:#0f172a;
    direction:ltr;
    text-align:left;
}

.stock-orderbook-heading th{
    width:auto;
    background:#eff6ff;
    color:var(--primary);
}

.stock-empty-state{
    background:#f8fafc;
    border:1px dashed #cbd5e1;
    border-radius:9px;
    color:var(--text-light);
    padding:24px;
    text-align:center;
}

.stock-symbol-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border-bottom:1px solid #e2e8f0;
    padding-bottom:18px;
    margin-bottom:18px;
}

.stock-symbol-header-kicker{
    color:#64748b;
    display:block;
    font-size:11px;
    font-weight:700;
    margin-bottom:3px;
}

.stock-symbol-header h3{
    color:#0f172a;
    font-size:22px;
    margin:0;
}

.stock-symbol-header h3 small{
    color:#64748b;
    font-size:12px;
    font-weight:400;
    margin-right:8px;
}

.stock-symbol-industry{
    color:#0f766e;
    display:inline-block;
    font-size:11px;
    margin-top:5px;
}

.stock-symbol-quote{
    direction:ltr;
    text-align:left;
}

.stock-symbol-quote strong{
    color:#0f172a;
    display:block;
    font-size:26px;
    line-height:1.1;
}

.stock-symbol-quote span{
    display:block;
    font-size:13px;
    font-weight:700;
    margin-top:5px;
}

.stock-tab-layout{
    display:grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(280px, .85fr);
    gap:14px;
}

.stock-data-section{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:18px;
}

.stock-section-head{
    align-items:flex-start;
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-bottom:15px;
}

.stock-section-head h3{
    color:#1e293b;
    font-size:17px;
    margin:0;
}

.stock-section-head > span{
    color:#94a3b8;
    font-size:11px;
    text-align:left;
}

.stock-kpi-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.stock-kpi-grid-3{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.stock-info-table{
    display:grid;
    gap:0;
}

.stock-info-row{
    align-items:center;
    border-bottom:1px solid #eef2f7;
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:10px 0;
}

.stock-info-row:last-child{
    border-bottom:0;
    padding-bottom:0;
}

.stock-info-row span{
    color:#64748b;
    font-size:12px;
}

.stock-info-row strong{
    color:#0f172a;
    direction:ltr;
    font-size:14px;
}

.stock-owner-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.stock-owner-column{
    border-radius:9px;
    padding:13px;
}

.stock-owner-column h4{
    font-size:14px;
    margin:0 0 4px;
}

.stock-owner-buy{
    background:#f0fdf4;
    border:1px solid #bbf7d0;
}

.stock-owner-buy h4{
    color:#15803d;
}

.stock-owner-sell{
    background:#fff7ed;
    border:1px solid #fed7aa;
}

.stock-owner-sell h4{
    color:#c2410c;
}

.stock-owner-balance{
    margin-top:14px;
}

.stock-owner-section{
    max-width:100%;
}

.stock-owner-tables{
    display:grid;
    gap:14px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.stock-owner-table-card{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:10px;
    overflow:hidden;
}

.stock-owner-table-card h4{
    color:#1e293b;
    font-size:14px;
    margin:0;
    padding:13px 14px 10px;
}

.stock-owner-comparison-table{
    border-collapse:collapse;
    width:100%;
}

.stock-owner-comparison-table th,
.stock-owner-comparison-table td{
    border-top:1px solid #e2e8f0;
    padding:12px 10px;
    text-align:right;
}

.stock-owner-comparison-table thead th{
    color:#64748b;
    font-size:11px;
    font-weight:700;
}

.stock-owner-comparison-table tbody th{
    color:#475569;
    font-size:12px;
    font-weight:500;
}

.stock-owner-comparison-table td{
    direction:ltr;
    font-size:13px;
    font-weight:700;
    text-align:left;
}

.stock-owner-comparison-table .stock-real-heading,
.stock-owner-comparison-table .stock-real-cell{
    background:#f0fdf4;
    color:#15803d;
}

.stock-owner-comparison-table .stock-legal-heading,
.stock-owner-comparison-table .stock-legal-cell{
    background:#fff7ed;
    color:#c2410c;
}

.stock-owner-legend{
    display:flex;
    gap:16px;
    margin:-4px 0 15px;
}

.stock-owner-legend span{
    align-items:center;
    color:#64748b;
    display:inline-flex;
    font-size:11px;
    gap:5px;
}

.stock-owner-legend i{
    border-radius:50%;
    display:inline-block;
    height:8px;
    width:8px;
}

.stock-real-dot{
    background:#0f766e;
}

.stock-legal-dot{
    background:#f59e0b;
}

.stock-owner-chart{
    display:grid;
    gap:14px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.stock-owner-group{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:14px;
}

.stock-owner-group h4{
    border-bottom:1px solid #e2e8f0;
    color:#1e293b;
    font-size:14px;
    margin:0 0 14px;
    padding-bottom:9px;
}

.stock-owner-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:7px 9px;
    margin-top:14px;
}

.stock-owner-row:first-of-type{
    margin-top:0;
}

.stock-owner-row-title{
    color:#475569;
    font-size:11px;
    grid-column:1 / -1;
}

.stock-owner-value{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.stock-owner-real{
    grid-column:1;
    grid-row:2;
}

.stock-owner-row > .stock-owner-bar:not(.stock-owner-bar-legal){
    grid-column:1;
    grid-row:3;
}

.stock-owner-bar-legal{
    grid-column:2;
    grid-row:2;
}

.stock-owner-value span{
    color:#64748b;
    font-size:10px;
}

.stock-owner-value strong{
    color:#0f172a;
    direction:ltr;
    font-size:13px;
}

.stock-owner-legal{
    grid-column:2;
    grid-row:3;
    text-align:left;
}

.stock-owner-bar{
    background:#d1fae5;
    border-radius:999px;
    direction:ltr;
    height:7px;
    overflow:hidden;
    align-self:end;
}

.stock-owner-bar-legal{
    background:#fef3c7;
}

.stock-owner-bar i{
    border-radius:999px;
    display:block;
    height:100%;
}

.stock-owner-real-bar{
    background:#0f766e;
}

.stock-owner-legal-bar{
    background:#f59e0b;
}

.stock-orderbook-section{
    margin-top:14px;
}

.stock-orderbook-legend{
    display:flex;
    gap:7px;
    margin:-4px 0 12px;
}

.stock-buy-legend,
.stock-sell-legend{
    border-radius:999px;
    font-size:11px;
    padding:3px 9px;
}

.stock-buy-legend{
    background:#f0fdf4;
    color:#15803d;
}

.stock-sell-legend{
    background:#fff7ed;
    color:#c2410c;
}

.stock-orderbook-table{
    border-collapse:separate;
    border-spacing:0;
    min-width:680px;
    width:100%;
}

.stock-orderbook-table th,
.stock-orderbook-table td{
    border-bottom:1px solid #e2e8f0;
    padding:11px 9px;
    text-align:center;
    white-space:nowrap;
}

.stock-orderbook-table th{
    color:#64748b;
    font-size:11px;
    font-weight:700;
}

.stock-orderbook-table td{
    color:#0f172a;
    direction:ltr;
    font-size:13px;
}

.stock-orderbook-table tbody tr:last-child td{
    border-bottom:0;
}

.stock-buy-heading,
.stock-buy-cell,
.stock-buy-price{
    background:#f0fdf4;
}

.stock-sell-heading,
.stock-sell-cell,
.stock-sell-price{
    background:#fff7ed;
}

.stock-buy-price{
    color:#15803d !important;
    font-weight:700;
}

.stock-sell-price{
    color:#c2410c !important;
    font-weight:700;
}

.stock-price-overview{
    display:grid;
    grid-template-columns:minmax(280px, .9fr) minmax(0, 1.1fr);
    gap:14px;
}

.stock-price-hero{
    grid-row:span 2;
    background:linear-gradient(145deg, #12304a 0%, #1c5d6b 100%);
    color:#fff;
    border-radius:12px;
    padding:22px;
    min-height:250px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.stock-price-hero.is-positive{
    background:linear-gradient(145deg, #166534 0%, #15803d 100%);
}

.stock-price-hero.is-negative{
    background:linear-gradient(145deg, #991b1b 0%, #dc2626 100%);
}

.stock-price-hero.is-neutral{
    background:linear-gradient(145deg, #334155 0%, #475569 100%);
}

.stock-price-hero-head,
.stock-price-hero-footer,
.stock-range-head,
.stock-price-details-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
}

.stock-price-eyebrow{
    color:#6f9aa1;
    display:block;
    font-size:12px;
    font-weight:700;
    margin-bottom:4px;
}

.stock-price-hero .stock-price-eyebrow{
    color:#a8d4d0;
}

.stock-price-hero h3,
.stock-range-panel h3,
.stock-price-details h3{
    margin:0;
    font-size:18px;
}

.stock-live-badge{
    color:#d7f9e5;
    background:rgba(255,255,255,.12);
    border-radius:999px;
    padding:4px 9px;
    font-size:11px;
    white-space:nowrap;
}

.stock-live-badge i{
    width:7px;
    height:7px;
    display:inline-block;
    border-radius:50%;
    background:#65d391;
    margin-left:4px;
}

.stock-price-hero-value strong{
    display:block;
    direction:ltr;
    font-size:clamp(32px, 4vw, 48px);
    letter-spacing:0;
    line-height:1.1;
}

.stock-price-hero-value > span{
    direction:ltr;
    display:block;
    margin-top:9px;
    font-size:16px;
    font-weight:700;
}

.stock-price-hero-value em{
    font-size:13px;
    font-style:normal;
    opacity:.85;
}

.stock-price-hero-footer{
    border-top:1px solid rgba(255,255,255,.18);
    padding-top:12px;
    color:#b8ced4;
    font-size:12px;
}

.stock-price-hero-footer > span{
    min-width:0;
}

.stock-price-hero-footer b{
    display:block;
    color:#fff;
    direction:ltr;
    margin-top:3px;
}

.stock-price-hero-footer small,
.stock-price-hero-footer em{
    display:block;
    font-size:11px;
    font-style:normal;
}

.stock-price-hero-footer em{
    color:#b8ced4;
    direction:ltr;
    margin-top:3px;
}

.stock-price-details-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.stock-price-metric{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:14px;
    min-height:86px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.stock-price-metric span,
.stock-price-metric small{
    color:#64748b;
    font-size:12px;
}

.stock-price-metric strong{
    color:#0f172a;
    direction:ltr;
    font-size:19px;
    margin-top:3px;
}

.stock-price-metric small{
    direction:ltr;
    margin-top:3px;
}

.stock-price-metric.is-positive strong,
.stock-price-metric.is-positive small,
.stock-price-hero-value .is-positive{
    color:#16a34a;
}

.stock-price-metric.is-negative strong,
.stock-price-metric.is-negative small,
.stock-price-hero-value .is-negative{
    color:#dc2626;
}

.stock-price-hero-value .is-positive,
.stock-price-hero-value .is-negative{
    color:#d7f9e5;
}

.stock-price-day-panel,
.stock-price-details{
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:17px;
}

.stock-price-section-head,
.stock-price-details-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.stock-price-section-head > span{
    color:#94a3b8;
    font-size:11px;
    text-align:left;
}

.stock-price-section-head h3{
    margin:0;
    font-size:17px;
}

.stock-price-day-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-top:16px;
}

.stock-price-limits{
    display:flex;
    justify-content:space-between;
    gap:10px;
    border-top:1px solid #e2e8f0;
    margin-top:13px;
    padding-top:11px;
}

.stock-price-limits span{
    display:flex;
    align-items:center;
    gap:8px;
}

.stock-price-limits small{
    color:#64748b;
    font-size:11px;
}

.stock-price-limits b{
    direction:ltr;
    color:#0f766e;
    font-size:13px;
}

.stock-price-details{
    grid-column:1 / -1;
}

.stock-price-details-note{
    color:#94a3b8;
    font-size:11px;
}

.stock-price-details-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    margin-top:16px;
}


.dashboard-card:focus-visible,
.back-btn:focus-visible,
.search-btn:focus-visible,
.top-nav-item:focus-visible{

    outline:3px solid rgba(37,99,235,.28);

    outline-offset:3px;

}

@media (max-width: 720px){
    .stock-panel-heading{
        flex-direction:column;
    }

    .stock-filters,
    .stock-table-tabs{
        grid-template-columns:1fr;
    }

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

    .stock-symbol-header,
    .stock-section-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .stock-symbol-quote{
        text-align:right;
    }

    .stock-tab-layout,
    .stock-owner-grid,
    .stock-owner-chart,
    .stock-owner-tables{
        grid-template-columns:1fr;
    }

    .stock-kpi-grid-3,
    .stock-price-details-grid{
        grid-template-columns:1fr;
    }

    .stock-price-hero{
        grid-row:auto;
    }

    .stock-price-details{
        grid-column:auto;
    }

    .stock-price-details-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .stock-table-tab{
        text-align:right;
    }
}