/* Contribute tool — friendly + pleasant theme (base: Tailwind + Vazirmatn) */
:root {
    --primary: #B91C1C;
    --primary-dark: #7F1D1D;
    --accent: #DC2626;
    --paper: #FAF6F0;
    --ink: #1c1917;
    --radius: 1rem;
    --ring: rgba(185, 28, 28, .16);
}
html { scroll-behavior: smooth; }
body {
    line-height: 2.1;
    background:
        radial-gradient(60rem 22rem at 85% -6rem, rgba(185, 28, 28, .08), transparent 60%),
        radial-gradient(50rem 20rem at 10% 0, rgba(217, 119, 6, .06), transparent 60%),
        var(--paper);
}
.dark body, body.dark { background: #0c0a09; }
::selection { background: rgba(185, 28, 28, .22); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: .4rem; }

/* ---------- header ---------- */
.site-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    box-shadow: 0 10px 30px -12px rgba(127, 29, 29, .55);
}
.header-link {
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 9999px;
    padding: .35rem .9rem;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    transition: background .2s ease, transform .2s ease;
    text-decoration: none;
}
.header-link:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.icon-btn {
    width: 2.5rem; height: 2.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .12);
    font-size: 1.1rem; line-height: 1;
    transition: background .2s ease, transform .2s ease;
}
.icon-btn:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
#progress-track { background: rgba(255, 255, 255, .22); }
#progress-bar {
    background: linear-gradient(-90deg, #fff, #fecaca);
    transition: width .45s cubic-bezier(.22, 1, .36, 1);
}

/* ---------- hero ---------- */
.hero-card {
    border: 1px solid #f0e7da;
    background: linear-gradient(-180deg, #fffdf9, #fff);
    box-shadow: 0 18px 40px -24px rgba(127, 29, 29, .25);
}
.dark .hero-card { background: #1c1917; border-color: #44403c; box-shadow: none; }
.save-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 700;
    border: 1px solid #e7e5e4; border-radius: 9999px;
    padding: .2rem .8rem; background: #fafaf9;
    transition: border-color .3s ease, background .3s ease;
}
.dark .save-pill { background: #292524; border-color: #57534e; }
.save-pill.is-saving { border-color: #d97706; }
.save-pill.is-saved { border-color: #16a34a; }

/* ---------- panes ---------- */
.pane {
    border-radius: 1.25rem;
    border: 1px solid #f0e7da;
    box-shadow: 0 24px 50px -30px rgba(28, 25, 23, .25);
    animation: paneIn .38s cubic-bezier(.22, 1, .36, 1);
}
.dark .pane { border-color: #44403c; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8); }
@keyframes paneIn {
    from { opacity: 0; transform: translateY(14px) scale(.995); }
    to { opacity: 1; transform: none; }
}
.pane-title { display: flex; align-items: center; gap: .6rem; }
.pane-title .t-ico {
    width: 2.2rem; height: 2.2rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .8rem; font-size: 1.15rem;
    background: rgba(185, 28, 28, .1);
    border: 1px solid rgba(185, 28, 28, .2);
}
.pane-sub { font-size: .85rem; opacity: .7; margin-top: -.35rem; }
.pane-nav {
    position: sticky; bottom: .75rem;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px);
    border: 1px solid #f0e7da;
    border-radius: 1rem;
    padding: .7rem .9rem;
    box-shadow: 0 14px 30px -20px rgba(28, 25, 23, .35);
}
.dark .pane-nav { background: rgba(28, 25, 23, .85); border-color: #44403c; }

/* ---------- stepper ---------- */
#stepper .step {
    border: 1.5px solid #e7e5e4;
    background: #fff;
    opacity: 1;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .6rem .4rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.dark #stepper .step { background: #1c1917; border-color: #44403c; }
#stepper .step:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(28, 25, 23, .5); }
#stepper .step .step-num {
    width: 1.7rem; height: 1.7rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px; font-size: .85rem; font-weight: 800;
    background: #f5f5f4; border: 1px solid #e7e5e4;
}
.dark #stepper .step .step-num { background: #292524; border-color: #57534e; }
#stepper .step.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary-dark);
    color: #fff;
    box-shadow: 0 14px 26px -16px rgba(185, 28, 28, .7);
}
#stepper .step.active .step-num { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); color: #fff; }
#stepper .step.done { border-color: var(--primary); color: var(--primary); background: #fff7f5; }
.dark #stepper .step.done { color: #FCA5A5; background: rgba(185, 28, 28, .12); border-color: #7f1d1d; }
#stepper .step.done .step-num { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (max-width: 640px) {
    #stepper .step { font-size: .75rem; gap: .3rem; }
    #stepper .step .step-txt { display: none; }
    #stepper .step .step-num { width: 2rem; height: 2rem; font-size: .95rem; }
}

/* ---------- fields ---------- */
.fld-label { display: block; font-weight: 800; font-size: .9rem; margin-bottom: .35rem; }
.req { color: var(--accent); font-weight: 800; }
.fld {
    width: 100%; border: 1.5px solid #e7e5e4; border-radius: .8rem;
    padding: .7rem .9rem; background: #fff; font-size: .95rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.fld::placeholder { opacity: .45; }
.fld:hover { border-color: #d6d3d1; }
.dark .fld { background: #262626; border-color: #525252; color: #f5f5f5; }
.fld:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--ring);
    background: #fffdfc;
}
.dark .fld:focus { background: #262626; }
select.fld {
    appearance: none;
    background-image: linear-gradient(-45deg, transparent 50%, #a8a29e 50%), linear-gradient(-135deg, #a8a29e 50%, transparent 50%);
    background-position: calc(1rem) 55%, calc(1rem + 6px) 55%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-left: 2.2rem;
}
.hint { font-size: .78rem; opacity: .68; line-height: 1.9; }
.hint-inline { font-weight: 400; font-size: .78rem; opacity: .65; }
.count { font-weight: 700; font-size: .75rem; opacity: .65; background: #f5f5f4; border-radius: 9999px; padding: .05rem .6rem; }
.dark .count { background: #292524; }
.field-card {
    border: 1.5px dashed #e7e5e4; border-radius: 1rem; padding: 1rem;
    background: #fffdfb; transition: border-color .2s ease, background .2s ease;
}
.field-card:hover { border-color: #d6c9b8; }
.dark .field-card { background: rgba(255, 255, 255, .02); border-color: #44403c; }
.dropzone input[type="file"] {
    width: 100%; font-size: .85rem;
    border: 1.5px dashed #d6d3d1; border-radius: .8rem;
    padding: .8rem; background: #fafaf9; cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.dropzone input[type="file"]:hover { border-color: var(--primary); background: #fff7f5; }
.dark .dropzone input[type="file"] { background: #1c1917; border-color: #57534e; }

/* ---------- buttons ---------- */
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--primary) 55%, var(--primary-dark));
    color: #fff; font-weight: 800; font-size: .92rem;
    padding: .7rem 1.6rem; border-radius: .85rem;
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 2.9rem;
    box-shadow: 0 14px 26px -16px rgba(185, 28, 28, .8);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 18px 30px -16px rgba(185, 28, 28, .85); }
.btn-primary:active { transform: translateY(0) scale(.99); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary {
    border: 1.5px solid var(--primary); color: var(--primary);
    font-weight: 800; font-size: .87rem;
    padding: .6rem 1.15rem; border-radius: .85rem; background: #fff;
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 2.9rem;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dark .btn-secondary { color: #FCA5A5; border-color: #b45353; background: transparent; }
.btn-secondary:hover { background: rgba(185, 28, 28, .08); transform: translateY(-1px); box-shadow: 0 12px 24px -18px rgba(185, 28, 28, .6); }
.btn-secondary:active { transform: scale(.99); }

/* ---------- editor toolbar ---------- */
.toolbar {
    display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
    border: 1px solid #e7e5e4; border-radius: 1rem; padding: .55rem;
    background: rgba(250, 250, 249, .92); backdrop-filter: blur(8px);
    position: sticky; top: .75rem; z-index: 5;
    box-shadow: 0 12px 26px -20px rgba(28, 25, 23, .35);
}
.dark .toolbar { background: rgba(28, 25, 23, .92); border-color: #525252; }
.toolbar button {
    font-size: .8rem; font-weight: 800; border: 1px solid #e7e5e4;
    border-radius: .65rem; padding: .42rem .7rem; background: #fff;
    min-height: 2.4rem;
    transition: border-color .15s ease, color .15s ease, transform .15s ease, background .15s ease;
}
.dark .toolbar button { background: #292524; border-color: #57534e; }
.toolbar button:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); background: #fff7f5; }
.dark .toolbar button:hover { color: #FCA5A5; background: rgba(185, 28, 28, .14); }
.toolbar button:active { transform: scale(.97); }
.tb-sep { width: 1px; height: 1.6rem; background: #e7e5e4; margin: 0 .15rem; }
.dark .tb-sep { background: #44403c; }
.tb-danger:hover { border-color: #dc2626 !important; color: #dc2626 !important; }

.editor {
    border: 1.5px solid #e7e5e4; border-radius: 1rem; padding: 1.4rem 1.5rem;
    min-height: 24rem; font-size: 1.05rem; line-height: 2.2; background: #fffdfc;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.dark .editor { background: #262626; border-color: #525252; }
.editor:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.editor h2 { font-size: 1.35rem; font-weight: 800; color: var(--primary); margin: 1em 0 .4em; padding-bottom: .2em; border-bottom: 2px solid rgba(185, 28, 28, .15); }
.dark .editor h2 { color: #FCA5A5; }
.editor h3 { font-size: 1.12rem; font-weight: 800; margin: 1em 0 .4em; }
.editor blockquote { border-right: 4px solid var(--primary); border-radius: .4rem; background: rgba(185, 28, 28, .05); padding: .6rem .9rem; margin: .8em 0; }
.editor table { border-collapse: separate; border-spacing: 0; width: 100%; margin: .8em 0; font-size: .9rem; border: 1px solid #e7e5e4; border-radius: .7rem; overflow: hidden; }
.editor th, .editor td { border-bottom: 1px solid #e7e5e4; padding: .45rem .7rem; }
.editor tr:last-child th, .editor tr:last-child td { border-bottom: none; }
.editor th { background: rgba(185, 28, 28, .08); }
.editor figure { margin: .9em 0; text-align: center; background: #fafaf9; border: 1px solid #f0e7da; border-radius: .9rem; padding: .8rem; }
.dark .editor figure { background: #1c1917; border-color: #44403c; }
.editor figure img { max-height: 16rem; width: auto; max-width: 100%; margin: 0 auto; border-radius: .6rem; }
.editor figcaption {
    font-size: .8rem; opacity: .8; border: 1px dashed #a8a29e;
    border-radius: .5rem; padding: .2rem .6rem; margin-top: .5rem; background: #fff;
}
.dark .editor figcaption { background: transparent; }

/* callout inside the editor */
.ed-callout { border-radius: .8rem; padding: .7rem 1rem; margin: .9em 0; border: 1.5px solid; box-shadow: 0 10px 24px -20px rgba(28, 25, 23, .5); }
.ed-callout > .ed-callout-head { font-weight: 800; font-size: .9rem; margin-bottom: .25rem; position: relative; padding-left: 1.8rem; }
.ed-callout-del {
    position: absolute; left: .2rem; top: .05rem;
    width: 1.5rem; height: 1.5rem; line-height: 1;
    border: 1px solid currentColor; border-radius: .45rem;
    background: rgba(255, 255, 255, .6); opacity: .6; cursor: pointer; font-size: .9rem;
    transition: opacity .15s ease, transform .15s ease;
}
.ed-callout-del:hover { opacity: 1; transform: scale(1.06); }
.ed-callout-info { background: rgba(37, 99, 235, .09); border-color: #2563eb; }
.ed-callout-tip { background: rgba(22, 163, 74, .09); border-color: #16a34a; }
.ed-callout-important { background: rgba(147, 51, 234, .09); border-color: #9333ea; }
.ed-callout-warning { background: rgba(217, 119, 6, .11); border-color: #d97706; }
.ed-callout-caution { background: rgba(220, 38, 38, .09); border-color: #dc2626; }
.ed-callout-quote { background: rgba(87, 83, 78, .09); border-color: #78716c; }

/* math and footnotes inside the editor */
.ed-math { font-family: monospace; background: rgba(185, 28, 28, .09); border-radius: .35rem; padding: .05rem .45rem; border: 1px solid rgba(185, 28, 28, .18); }
.ed-math-display { display: block; text-align: center; padding: .5rem; margin: .7em 0; }
.ed-fn { color: var(--primary); font-weight: 800; cursor: default; background: rgba(185, 28, 28, .1); border-radius: .35rem; padding: 0 .3rem; }
.dark .ed-fn { color: #FCA5A5; }

.cover-thumb { max-height: 12rem; width: auto; max-width: 100%; border-radius: .8rem; margin-top: .6rem; box-shadow: 0 16px 30px -22px rgba(28, 25, 23, .6); }
.img-row { display: flex; align-items: center; gap: .6rem; border: 1px solid #f0e7da; border-radius: .9rem; padding: .5rem .7rem; background: #fffdfb; }
.dark .img-row { border-color: #44403c; background: rgba(255, 255, 255, .02); }
.img-row img { height: 3.2rem; width: auto; max-width: 5.5rem; border-radius: .5rem; object-fit: cover; }
.img-row input { flex: 1; border: 1px solid #e7e5e4; border-radius: .6rem; padding: .4rem .7rem; font-size: .85rem; background: #fff; }
.dark .img-row input { background: #1c1917; border-color: #57534e; color: inherit; }
.img-row button { font-size: .8rem; font-weight: 700; opacity: .7; border-radius: .5rem; padding: .3rem .6rem; }
.img-row button:hover { opacity: 1; color: #fff; background: #dc2626; }

/* review */
.check { border-radius: .8rem; padding: .55rem .9rem; border: 1.5px solid; background: #fff; animation: paneIn .3s ease; }
.dark .check { background: rgba(255, 255, 255, .03); }
.check-error { background: rgba(220, 38, 38, .09); border-color: #dc2626; border-right-width: 5px; }
.check-warn { background: rgba(217, 119, 6, .1); border-color: #d97706; border-right-width: 5px; }
.check-ok { background: rgba(22, 163, 74, .09); border-color: #16a34a; border-right-width: 5px; }

.preview { border: 1px solid #f0e7da; border-radius: 1.1rem; padding: 1.6rem 1.7rem; font-size: 1.03rem; line-height: 2.15; background: #fffdf9; box-shadow: inset 0 1px 0 #fff, 0 18px 40px -32px rgba(28, 25, 23, .4); }
.dark .preview { border-color: #44403c; background: #1c1917; box-shadow: none; }
.preview h1 { font-size: 1.7rem; font-weight: 800; margin-bottom: .25rem; line-height: 1.8; }
.preview h2 { font-size: 1.32rem; font-weight: 800; color: var(--primary); margin: 1em 0 .4em; padding-bottom: .15em; border-bottom: 2px solid rgba(185, 28, 28, .14); }
.dark .preview h2 { color: #FCA5A5; }
.preview h3 { font-size: 1.12rem; font-weight: 800; margin: 1em 0 .4em; }
.preview .meta { font-size: .82rem; opacity: .72; margin-bottom: .7rem; background: rgba(185, 28, 28, .06); border-radius: .6rem; padding: .3rem .8rem; display: inline-block; }
.preview .pv-summary { border-right: 4px solid var(--primary); background: rgba(185, 28, 28, .05); border-radius: .5rem; padding: .6rem .9rem; margin: .9em 0; font-size: .95rem; }
.preview blockquote { border-right: 4px solid var(--primary); background: rgba(185, 28, 28, .05); border-radius: .5rem; padding: .6rem .9rem; margin: .9em 0; }
.preview table { border-collapse: separate; border-spacing: 0; width: 100%; margin: .9em 0; font-size: .9rem; border: 1px solid #e7e5e4; border-radius: .7rem; overflow: hidden; }
.preview th, .preview td { border-bottom: 1px solid #e7e5e4; padding: .45rem .7rem; }
.preview th { background: rgba(185, 28, 28, .08); }
.preview figure { margin: .9em 0; text-align: center; }
.preview figure img { max-height: 20rem; width: auto; max-width: 100%; margin: 0 auto; border-radius: .8rem; box-shadow: 0 18px 36px -26px rgba(28, 25, 23, .55); }
.preview figcaption { font-size: .82rem; opacity: .75; margin-top: .3rem; }
.preview .pv-callout { border-radius: .8rem; padding: .7rem 1rem; margin: .9em 0; border: 1.5px solid; }
.preview .pv-math { font-family: monospace; background: rgba(185, 28, 28, .09); border-radius: .35rem; padding: .05rem .45rem; }
.preview .pv-math-display { display: block; text-align: center; padding: .5rem; margin: .7em 0; }
.preview .pv-fn { color: var(--primary); font-weight: 800; }
.dark .preview .pv-fn { color: #FCA5A5; }

/* export timeline */
.timeline { counter-reset: step; }
.timeline > li {
    position: relative; background: #fffdfb; border: 1px solid #f0e7da;
    border-radius: 1rem; padding: .9rem 1rem .9rem 1rem;
}
.dark .timeline > li { background: rgba(255, 255, 255, .02); border-color: #44403c; }
.timeline > li::before {
    counter-increment: step; content: counter(step);
    position: absolute; top: -.8rem; right: 1rem;
    width: 1.7rem; height: 1.7rem; border-radius: 9999px;
    background: var(--primary); color: #fff; font-weight: 800; font-size: .85rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 20px -12px rgba(185, 28, 28, .8);
}

.md-raw {
    font-size: .75rem; line-height: 1.8; max-height: 22rem; overflow: auto;
    background: #1c1917; color: #e7e5e4; border-radius: .8rem; padding: .9rem;
    white-space: pre-wrap; word-break: break-word; margin-top: .5rem;
    border: 1px solid #44403c;
}

/* dialogs */
.dlg { border: none; border-radius: 1.1rem; padding: 1.4rem; width: min(27rem, 92vw); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .5); animation: paneIn .25s ease; }
.dlg::backdrop { background: rgba(28, 25, 23, .5); backdrop-filter: blur(4px); }
.dark .dlg { background: #292524; color: #f5f5f5; }

/* footer */
.site-footer a { font-weight: 700; }

/* motion + mobile */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
    html { scroll-behavior: auto; }
}
@media (max-width: 640px) {
    .pane { border-radius: 1rem; }
    .pane-nav { bottom: .5rem; }
    .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
    .pane-nav .btn-primary, .pane-nav .btn-secondary { width: auto; flex: 1; }
    .editor { padding: 1rem; min-height: 20rem; }
    .preview { padding: 1.1rem 1.15rem; }
}