/* ===================================================================
   TestKav Skills — Design System Core  (skills.css)
   فلت/سفید/تمیز · RTL · لایت+دارک · پینار
   این فایل آخر از همه لود می‌شود تا مبنای جدید برنده باشد.
   همهٔ کلاس‌ها با پیشوند sk- تا با CSSهای قدیمی تداخل نکنند.
   =================================================================== */
/* --- فونت پینار (مسیر نسبی به statics/fonts/pinar) --- */
@font-face {
    font-family: 'PinarSK';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../../fonts/pinar/Pinar-Regular.woff2?v=fontfix-20260711T152337Z) format('woff2')
}

@font-face {
    font-family: 'PinarSK';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../../fonts/pinar/Pinar-Medium.woff2?v=fontfix-20260711T152337Z) format('woff2')
}

@font-face {
    font-family: 'PinarSK';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../../fonts/pinar/Pinar-SemiBold.woff2?v=fontfix-20260711T152337Z) format('woff2')
}

@font-face {
    font-family: 'PinarSK';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../../fonts/pinar/Pinar-Bold.woff2?v=fontfix-20260711T152337Z) format('woff2')
}

@font-face {
    font-family: 'PinarSK';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(../../fonts/pinar/Pinar-ExtraBold.woff2?v=fontfix-20260711T152337Z) format('woff2')
}

@font-face {
    font-family: 'PinarSK';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../../fonts/pinar/Pinar-Black.woff2?v=fontfix-20260711T152337Z) format('woff2')
}

:root {
    --sk-amber: #ffc218;
    --sk-amber-deep: #e9ad00;
    --sk-amber-soft: rgba(255,194,24,.12);
    --sk-amber-line: rgba(255,194,24,.4);
    --sk-charcoal: #181a1d;
    --sk-bg: #f6f6f4;
    --sk-surface: #fff;
    --sk-surface-2: #f8f7f4;
    --sk-surface-3: #f0eee9;
    --sk-ink: #15171a;
    --sk-ink-soft: #5b5e63;
    --sk-ink-faint: #9498a0;
    --sk-line: #ececec;
    --sk-line-2: #f2f2f2;
    --sk-line-strong: #dadada;
    --sk-ok: #1f9d57;
    --sk-ok-soft: rgba(31,157,87,.1);
    --sk-ok-line: rgba(31,157,87,.3);
    --sk-danger: #e5484d;
    --sk-danger-soft: rgba(229,72,77,.1);
    --sk-danger-line: rgba(229,72,77,.3);
    --sk-warn: #d98a1f;
    --sk-warn-soft: rgba(217,138,31,.12);
    --sk-info: #2b6cb0;
    --sk-info-soft: rgba(43,108,176,.1);
    --sk-beg: #1f9d57;
    --sk-inter: #d98a1f;
    --sk-adv: #e9ad00;
    --sk-exp: #181a1d;
    --sk-r-sm: 9px;
    --sk-r-md: 12px;
    --sk-r-lg: 15px;
    --sk-r-pill: 999px;
    --sk-font: 'PinarSK','Pinar','Vazirmatn',Tahoma,system-ui,sans-serif;
    --sk-mono: 'SF Mono',ui-monospace,Menlo,Consolas,monospace;
    --sk-ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"] {
    --sk-bg: #0b0c0e;
    --sk-surface: #121316;
    --sk-surface-2: #17191c;
    --sk-surface-3: #202327;
    --sk-charcoal: #000;
    --sk-ink: #f3f4f1;
    --sk-ink-soft: #a6aab0;
    --sk-ink-faint: #6b7077;
    --sk-line: #26282c;
    --sk-line-2: #1d1f22;
    --sk-line-strong: #33363a;
    --sk-ok-soft: rgba(31,157,87,.16);
    --sk-danger-soft: rgba(229,72,77,.14);
    --sk-warn-soft: rgba(217,138,31,.16);
    --sk-info-soft: rgba(43,108,176,.18);
    --sk-exp: #e9ad00;
}

/* --- ریست محدود به بدنهٔ اسکیلز --- */
.sk-body {
    margin: 0;
    font-family: var(--sk-font);
    background: var(--sk-bg);
    color: var(--sk-ink);
    line-height: 1.7;
    font-weight: 400;
    transition: background .3s,color .3s;
    -webkit-text-size-adjust: 100%
}

.sk-body *,.sk-body *::before,.sk-body *::after {
    box-sizing: border-box
}

.sk-body h1,.sk-body h2,.sk-body h3,.sk-body h4 {
    margin: 0;
    color: inherit;
    font-weight: 800;
    letter-spacing: -.3px
}

.sk-body p {
    margin: 0
}

.sk-body a {
    color: inherit;
    text-decoration: none
}

.sk-body button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    font-size: .75em !important;
}

.sk-body svg {
    display: block
}

.sk-body ::selection {
    background: rgba(255,194,24,.35);
    color: #181a1d
}

.sk-body :focus-visible {
    /* outline:2.5px solid var(--sk-amber-line); */
    outline-offset: 2px;
    border-radius: 5px
}

.sk-tnum {
    font-variant-numeric: tabular-nums
}

/* --- دکمه‌ها --- */
.sk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 17px;
    border-radius: var(--sk-r-md);
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: .18s var(--sk-ease)
}

.sk-btn svg {
    width: 17px;
    height: 17px
}

.sk-btn--block {
    width: 100%
}

.sk-btn--sm {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: var(--sk-r-sm)
}

.sk-btn.sk-btn--primary {
    background: var(--sk-amber);
    color: #181a1d
}

.sk-btn.sk-btn--primary:hover {
    background: var(--sk-amber-deep)
}

.sk-btn.sk-btn--dark {
    background: #1f2227;
    color: #fff;
    border: 1px solid #1f2227
}

.sk-btn.sk-btn--dark:hover {
    background: #2c313a;
    border-color: #2c313a;
    color: #fff
}

.sk-btn.sk-btn--dark svg {
    color: #fff
}

[data-theme="dark"] .sk-btn.sk-btn--dark {
    background: var(--sk-amber);
    border-color: var(--sk-amber);
    color: #181a1d
}

[data-theme="dark"] .sk-btn.sk-btn--dark:hover {
    background: var(--sk-amber-deep);
    border-color: var(--sk-amber-deep);
    color: #181a1d
}

[data-theme="dark"] .sk-btn.sk-btn--dark svg {
    color: #181a1d
}

.sk-btn.sk-btn--ok {
    background: var(--sk-ok);
    color: #fff
}

.sk-btn.sk-btn--ok:hover {
    opacity: .92
}

.sk-btn.sk-btn--ghost {
    background: var(--sk-surface);
    color: var(--sk-ink);
    border: 1px solid var(--sk-line-strong)
}

.sk-btn.sk-btn--ghost:hover {
    background: var(--sk-surface-2)
}

.sk-btn.sk-btn--soft {
    background: var(--sk-surface-2);
    color: var(--sk-ink-soft);
    border: 1px solid var(--sk-line)
}

.sk-btn.sk-btn--soft:hover {
    background: var(--sk-surface-3)
}

.sk-btn.sk-btn--light {
    background: var(--sk-surface-2);
    color: var(--sk-ink);
    border: 1px solid var(--sk-line)
}

.sk-btn.sk-btn--light:hover {
    background: var(--sk-surface);
    border-color: var(--sk-amber-line)
}

[data-theme="dark"] .sk-btn.sk-btn--light {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-color: rgba(255,255,255,.16)
}

/* --- آیکون‌باتن + تاگل تم --- */
.sk-ibtn {
    width: 38px;
    height: 38px;
    border-radius: var(--sk-r-sm);
    border: 1px solid var(--sk-line);
    background: var(--sk-surface);
    display: grid;
    place-items: center;
    transition: .18s;
    position: relative
}

.sk-ibtn:hover {
    background: var(--sk-surface-2)
}

.sk-ibtn svg {
    width: 18px;
    height: 18px
}

.sk-ibtn svg {
    grid-area: 1/1
}

.sk-ibtn .sk-moon {
    display: block
}

.sk-ibtn .sk-sun {
    display: none
}

[data-theme="dark"] .sk-ibtn .sk-moon {
    display: none
}

[data-theme="dark"] .sk-ibtn .sk-sun {
    display: block
}

/* --- بَج/پیل --- */
.sk-badge {
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 11px;
    border-radius: var(--sk-r-pill);
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.sk-badge svg {
    width: 12px;
    height: 12px
}

.sk-badge--ok {
    background: var(--sk-ok-soft);
    color: var(--sk-ok)
}

.sk-badge--warn {
    background: var(--sk-warn-soft);
    color: var(--sk-warn)
}

.sk-badge--danger {
    background: var(--sk-danger-soft);
    color: var(--sk-danger)
}

.sk-badge--dark {
    background: var(--sk-charcoal);
    color: #fff
}

.sk-badge--soft {
    background: var(--sk-surface-3);
    color: var(--sk-ink-soft)
}

/* --- فرم --- */
.sk-field {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.sk-label {
    font-size: 13px;
    font-weight: 700
}

.sk-hint {
    font-size: 12px;
    color: var(--sk-ink-faint);
    font-weight: 500
}

.sk-input,.sk-select,.sk-textarea {
    width: 100%;
    height: 44px;
    border: 1px solid var(--sk-line-strong);
    border-radius: var(--sk-r-md);
    background: var(--sk-surface);
    color: var(--sk-ink);
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    transition: .15s
}

.sk-input::placeholder,.sk-textarea::placeholder {
    color: var(--sk-ink-faint)
}

.sk-input:focus,.sk-select:focus,.sk-textarea:focus {
    outline: none;
    border-color: var(--sk-amber)
}

.sk-textarea {
    height: auto;
    min-height: 92px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.8
}

.sk-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239498a0' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: left 13px center;
    background-size: 16px;
    padding-inline-end:38px}

/* --- کارت عمومی --- */
.sk-card {
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    background: var(--sk-surface);
    padding: 24px
}

@media(prefers-reduced-motion:reduce) {
    .sk-body * {
        transition: none!important;
        animation: none!important
    }
}