*{
    box-sizing:border-box;
}

:root{

    --bg:#f4f6f8;
    --card:#ffffff;
    --surface:#f8fafb;

    --text:#17212b;
    --muted:#7b8792;

    --navy:#153e5c;
    --navy2:#215879;

    --gold:#be9139;
    --gold-soft:#fff8e9;

    --green:#07865f;

    --border:#e1e7eb;

    --shadow:
        0 10px 34px rgba(27,40,52,.06);
}


html[data-theme="dark"]{

    --bg:#0d1319;
    --card:#151d24;
    --surface:#111920;

    --text:#eef3f7;
    --muted:#9aa8b4;

    --navy:#65a9d3;
    --navy2:#286589;

    --gold:#d5aa52;
    --gold-soft:#302817;

    --green:#4bd2a5;

    --border:#2c3944;

    --shadow:
        0 12px 36px rgba(0,0,0,.24);
}


html{
    color-scheme:light;
}

html[data-theme="dark"]{
    color-scheme:dark;
}


body{

    margin:0;

    min-height:100vh;

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

    color:var(--text);

    background:

        radial-gradient(
            circle at 90% 0,
            rgba(215,178,92,.12),
            transparent 24%
        ),

        radial-gradient(
            circle at 0 30%,
            rgba(63,123,162,.09),
            transparent 23%
        ),

        var(--bg);

    transition:
        background .25s ease,
        color .25s ease;
}


button,
input{
    font-family:inherit;
}


.app{

    width:min(
        820px,
        calc(100% - 26px)
    );

    margin:auto;

    padding:
        26px 0
        65px;
}


/* ======================================================
   HEADER
   ====================================================== */

.hero{
    text-align:center;
    padding:
        8px 8px
        25px;
}


.back-link{

    display:inline-flex;

    margin-bottom:17px;

    color:var(--muted);

    text-decoration:none;

    font-size:10.5px;

    transition:.18s;
}

.back-link:hover{
    color:var(--gold);
}


.logo{

    width:69px;
    height:69px;

    display:grid;
    place-items:center;

    margin:auto;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            #153e5c,
            #286589
        );

    color:white;

    font-size:31px;
    font-weight:900;

    box-shadow:
        0 12px 30px
        rgba(20,61,90,.20);
}


.hero h1{

    margin:
        15px 0
        5px;

    font-size:26px;
    font-weight:900;
}


.hero p{

    margin:0;

    color:var(--muted);

    font-size:12px;
}


.creator{

    margin-top:7px;

    color:var(--muted);

    font-size:9.5px;
}


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

.card,
.result-card{

    margin-bottom:14px;

    padding:22px;

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

    border-radius:23px;

    background:var(--card);

    box-shadow:var(--shadow);
}


.section-title{

    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:17px;

    font-weight:850;
}


.step-number{

    width:32px;
    height:32px;

    flex:0 0 32px;

    display:grid;
    place-items:center;

    border-radius:10px;

    background:#edf2f6;

    color:#173e5c;
}


html[data-theme="dark"]
.step-number{

    background:#22313d;
    color:#d2e7f5;
}


/* ======================================================
   CHOICE CARDS
   ====================================================== */

.choice-grid{

    display:grid;

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

    gap:10px;
}


.choice-card input,
.mini-choice input,
.segmented input{

    position:absolute;

    opacity:0;

    pointer-events:none;
}


.choice-content{

    min-height:82px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    padding:13px;

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

    border-radius:16px;

    background:var(--card);

    cursor:pointer;

    text-align:center;

    transition:.18s ease;
}


.choice-card input:checked
+ .choice-content{

    border-color:var(--gold);

    background:var(--gold-soft);

    color:#785712;

    box-shadow:
        0 0 0 3px
        rgba(190,145,57,.08);
}


html[data-theme="dark"]
.choice-card input:checked
+ .choice-content{

    color:#f1c96d;
}


.choice-icon{

    margin-bottom:4px;

    font-size:20px;
}


.choice-content strong{
    font-size:14px;
}


.choice-content small{

    margin-top:3px;

    color:var(--muted);

    font-size:10px;
}


/* ======================================================
   KARAT
   ====================================================== */

.karat-grid{

    display:grid;

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

    gap:8px;
}


.mini-choice span{

    min-height:59px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

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

    border-radius:13px;

    cursor:pointer;

    transition:.18s;
}


.mini-choice input:checked
+ span{

    border-color:var(--gold);

    background:var(--gold-soft);

    color:#785712;
}


html[data-theme="dark"]
.mini-choice input:checked
+ span{
    color:#f1c96d;
}


.mini-choice strong{
    font-size:12px;
}


.mini-choice small{

    margin-top:1px;

    color:var(--muted);

    font-size:9px;
}


/* ======================================================
   INPUTS
   ====================================================== */

.field{
    margin-top:14px;
}


.field label{

    display:block;

    margin-bottom:7px;

    font-size:12px;
    font-weight:700;
}


.input-wrap{
    position:relative;
}


input[type="text"]{

    width:100%;
    height:52px;

    padding:
        0 14px
        0 79px;

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

    border-radius:14px;

    outline:none;

    background:var(--surface);

    color:var(--text);

    font-size:16px;
    font-weight:650;

    transition:.18s;
}


input[type="text"]:focus{

    border-color:var(--gold);

    box-shadow:
        0 0 0 4px
        rgba(190,145,57,.09);
}


.unit{

    position:absolute;

    left:13px;
    top:50%;

    transform:
        translateY(-50%);

    color:var(--muted);

    font-size:10px;
}


.field-note{

    margin-top:6px;

    color:var(--muted);

    font-size:9.5px;

    line-height:1.8;
}


.optional{

    color:var(--muted);

    font-size:9px;
    font-weight:400;
}


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

.market-box{

    margin-top:17px;

    padding:15px;

    border:
        1px solid
        rgba(190,145,57,.34);

    border-radius:17px;

    background:
        rgba(190,145,57,.035);
}


.market-head{

    display:flex;

    justify-content:
        space-between;

    align-items:center;

    gap:12px;
}


.market-caption{

    color:var(--muted);

    font-size:9.5px;
}


.market-price{

    margin-top:3px;

    color:var(--navy);

    font-size:21px;
    font-weight:900;
}


.market-status{

    display:flex;
    flex-wrap:wrap;

    align-items:center;

    gap:
        4px 8px;

    margin-top:3px;

    color:var(--muted);

    font-size:9px;
}


.status-dot{

    width:7px;
    height:7px;

    border-radius:50%;

    background:#aaa;
}


.status-dot.ok{
    background:#13a36d;
}


.status-dot.error{
    background:#d55353;
}


.status-dot.loading{

    background:#d6a336;

    animation:
        blink 1s infinite;
}


@keyframes blink{

    50%{
        opacity:.3;
    }
}


.refresh-button{

    flex:0 0 auto;

    padding:
        8px 11px;

    border:
        1px solid
        rgba(190,145,57,.35);

    border-radius:10px;

    background:var(--card);

    color:#806019;

    cursor:pointer;

    font-size:10px;
}


html[data-theme="dark"]
.refresh-button{
    color:#e8bf62;
}


/* ======================================================
   SEGMENT
   ====================================================== */

.segmented{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    padding:4px;

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

    border-radius:13px;

    background:var(--surface);
}


.segmented span{

    display:block;

    padding:9px;

    border-radius:9px;

    text-align:center;

    cursor:pointer;

    color:var(--muted);

    font-size:11px;
}


.segmented input:checked
+ span{

    background:var(--card);

    color:var(--text);

    font-weight:800;

    box-shadow:
        0 2px 10px
        rgba(30,40,50,.07);
}


/* ======================================================
   RESULT
   ====================================================== */

.result-card{

    border-color:
        rgba(190,145,57,.45);

    background:
        linear-gradient(
            145deg,
            var(--card),
            var(--gold-soft)
        );
}


.result-label{

    text-align:center;

    color:var(--muted);

    font-size:11px;
}


.result-price{

    margin-top:5px;

    text-align:center;

    color:var(--green);

    font-size:36px;
    font-weight:900;

    line-height:1.35;
}


.result-unit{

    text-align:center;

    color:var(--muted);

    font-size:11px;
}


.money-words{

    min-height:24px;

    margin-top:5px;

    text-align:center;

    color:var(--navy);

    font-size:13px;
    font-weight:800;

    line-height:1.8;
}


.result-grid{

    display:grid;

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

    gap:8px;

    margin-top:17px;
}


.result-item{

    padding:
        11px 7px;

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

    border-radius:12px;

    background:var(--card);

    text-align:center;
}


.result-item small{

    display:block;

    margin-bottom:4px;

    color:var(--muted);

    font-size:9px;
}


.result-item strong{

    font-size:11px;
}


.result-note{

    margin-top:12px;

    color:var(--muted);

    font-size:9px;

    line-height:1.9;

    text-align:center;
}


/* ======================================================
   THEME BUTTON
   ====================================================== */

.theme-toggle{

    position:fixed;

    top:15px;
    left:15px;

    z-index:1000;

    width:45px;
    height:45px;

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

    border-radius:14px;

    background:var(--card);

    box-shadow:var(--shadow);

    cursor:pointer;

    font-size:19px;
}


/* ======================================================
   HELPERS
   ====================================================== */

.hidden{
    display:none !important;
}


footer{

    padding:
        9px 14px;

    text-align:center;

    color:var(--muted);

    font-size:9px;

    line-height:1.9;
}


/* ======================================================
   MOBILE FIRST POLISH
   ====================================================== */

@media(max-width:650px){

    .app{

        width:
            calc(100% - 18px);

        padding:
            14px 0
            40px;
    }


    .hero{

        padding:
            7px 5px
            18px;
    }


    .back-link{
        margin-bottom:12px;
    }


    .logo{

        width:60px;
        height:60px;

        border-radius:18px;

        font-size:26px;
    }


    .hero h1{

        margin-top:12px;

        font-size:21px;
    }


    .hero p{
        font-size:10.5px;
    }


    .card,
    .result-card{

        padding:16px;

        border-radius:19px;

        margin-bottom:10px;
    }


    .choice-grid{

        grid-template-columns:
            1fr 1fr;

        gap:7px;
    }


    .choice-content{

        min-height:75px;

        padding:9px 7px;
    }


    .choice-content strong{
        font-size:12px;
    }


    .choice-content small{
        font-size:9px;
    }


    .market-head{

        align-items:flex-start;
    }


    .market-price{
        font-size:18px;
    }


    .result-price{
        font-size:29px;
    }


    .result-grid{

        grid-template-columns:
            1fr;
    }


    .result-item{

        display:flex;

        justify-content:
            space-between;

        align-items:center;

        text-align:right;
    }


    .result-item small{
        margin:0;
    }


    .theme-toggle{

        top:9px;
        left:9px;

        width:41px;
        height:41px;

        border-radius:12px;
    }
}


@media(max-width:380px){

    .choice-grid{
        grid-template-columns:1fr;
    }


    .karat-grid{
        grid-template-columns:1fr;
    }


    .segmented{
        grid-template-columns:1fr;
    }
}

/* MAIN-KHOMS-ENTRY-CSS-START */

.main-khoms-entry-wrap{
    width:100%;
    margin:12px 0 0;
}

.main-khoms-entry{
    width:100%;
    min-height:78px;

    display:grid;
    grid-template-columns:44px 1fr 24px;
    align-items:center;
    gap:13px;

    padding:14px 17px;

    border:1.5px solid var(--border);
    border-radius:17px;

    background:var(--card);
    color:var(--text);

    text-decoration:none;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.main-khoms-entry:hover{
    transform:translateY(-1px);

    border-color:var(--gold);
    background:var(--gold-soft);

    box-shadow:
        0 8px 24px
        rgba(190,145,57,.09);
}

.main-khoms-icon{
    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border-radius:13px;

    background:#edf2f6;
    color:#173e5c;

    font-size:23px;
    font-weight:900;
}

.main-khoms-copy{
    min-width:0;

    display:flex;
    flex-direction:column;

    text-align:right;
}

.main-khoms-copy strong{
    font-size:15px;
    font-weight:850;
}

.main-khoms-copy small{
    margin-top:3px;

    color:var(--muted);

    font-size:10px;
    line-height:1.7;
}

.main-khoms-arrow{
    color:var(--muted);
    font-size:27px;

    transition:
        transform .18s ease;
}

.main-khoms-entry:hover
.main-khoms-arrow{
    transform:translateX(-3px);
}


/* DARK */

html[data-theme="dark"]
.main-khoms-entry{

    background:#182129;
    border-color:#303c47;
}

html[data-theme="dark"]
.main-khoms-entry:hover{

    background:
        linear-gradient(
            135deg,
            #30291b,
            #282319
        );

    border-color:#cda34d;
}

html[data-theme="dark"]
.main-khoms-icon{

    background:#223340;
    color:#e5bd62;
}


/* MOBILE */

@media(max-width:650px){

    .main-khoms-entry{
        min-height:72px;

        grid-template-columns:
            40px 1fr 18px;

        gap:9px;

        padding:12px;
    }

    .main-khoms-icon{
        width:40px;
        height:40px;

        font-size:20px;
    }

    .main-khoms-copy strong{
        font-size:13px;
    }

    .main-khoms-copy small{
        font-size:9px;
    }
}

@media(max-width:380px){

    .main-khoms-entry{
        grid-template-columns:
            37px 1fr;

        min-height:68px;
    }

    .main-khoms-arrow{
        display:none;
    }
}

/* MAIN-KHOMS-ENTRY-CSS-END */


/* CALCINO-INTERACTION-SAFETY-START */

html,
body{
    pointer-events:auto !important;
}

body{
    overflow-y:auto !important;
}

/*
 اگر بقایای Loader به هر دلیل در DOM وجود داشته باشد،
 هرگز نباید کلیک صفحه را بگیرد.
*/
#siteLoader{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

/* CALCINO-INTERACTION-SAFETY-END */


/* CALCINO-TRADE-BUTTON-START */

.calcino-trade-calc-wrapper{

    margin:
        18px auto
        15px;

    text-align:center;
}


.calcino-trade-calculate-button{

    width:
        min(100%,460px);

    min-height:
        54px;

    padding:
        12px 24px;

    border:
        1px solid
        rgba(220,170,50,.72);

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #bb821c,
            #8f5e0d
        );

    color:
        #fff;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        900;

    cursor:
        pointer;

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.18);

    transition:
        transform .14s ease,
        filter .14s ease;
}


.calcino-trade-calculate-button:hover{

    filter:
        brightness(1.09);
}


.calcino-trade-calculate-button:active{

    transform:
        translateY(1px);
}


.calcino-trade-calc-status{

    display:none;

    margin-top:
        8px;

    color:
        #d8a943;

    font-size:
        9px;

    line-height:
        1.8;
}


.calcino-trade-calc-status.show{

    display:block;
}


.calcino-trade-calc-status.success{

    color:
        #39c894;
}


/*
  نتیجه قبلی حذف نمی‌شود،
  اما مشخص است دیگر متعلق به ورودی فعلی نیست.
*/

.calcino-trade-stale{

    opacity:
        .38;

    filter:
        saturate(.4);

    transition:
        opacity .15s ease,
        filter .15s ease;
}


/*
  Percentage field
*/

#sellDeduction:invalid{

    border-color:
        #d8a943;
}


@media(max-width:650px){

    .calcino-trade-calc-wrapper{

        margin:
            15px 0
            13px;
    }


    .calcino-trade-calculate-button{

        width:
            100%;

        min-height:
            52px;

        font-size:
            14px;
    }
}

/* CALCINO-TRADE-BUTTON-END */