:root{--bg:#07110e;--card:#102019;--line:#284438;--green:#70b88a;--text:#edf4ef;--muted:#8fa49a;--red:#d47a7a}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text);font-family:Tahoma,Arial,sans-serif;background:radial-gradient(circle at 15% 10%,#183d2a55,transparent 32%),linear-gradient(135deg,#07110e,#040807 70%)}.page{width:min(700px,calc(100% - 24px));margin:auto;padding:55px 0 25px}.hero{padding:0 8px 30px}.eyebrow{color:var(--green);font-size:11px;letter-spacing:3px;font-weight:bold}h1{margin:14px 0;font-size:clamp(38px,8vw,64px);line-height:1.12}h1 span{color:var(--green)}.hero p{color:var(--muted);line-height:2}.hero i{display:block;width:75px;height:2px;background:#3d7755;margin-top:23px}.card{background:linear-gradient(145deg,#13261ef0,#08120ef5);border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:0 30px 80px #0008}.heading{display:flex;gap:15px;align-items:center;margin-bottom:28px}.heading>b{color:var(--green);border:1px solid var(--line);border-radius:50%;width:42px;height:42px;display:grid;place-items:center;font-size:12px}.heading h2{margin:0 0 6px;font-size:20px}.heading small{color:var(--muted)}form>label,.two>label{display:block;color:#c8d6ce;font-size:13px;margin-bottom:20px}input,select{width:100%;margin-top:9px;border:1px solid var(--line);background:#091510;color:var(--text);border-radius:13px;padding:15px;font-size:14px;outline:none}.two{display:grid;grid-template-columns:1fr 1.5fr;gap:15px}.choices{display:flex;gap:8px;margin-top:9px}.choices label{flex:1;text-align:center;padding:14px;border:1px solid var(--line);border-radius:13px;color:var(--muted);cursor:pointer}.choices input{display:none}.choices label:has(input:checked){background:#3d775522;border-color:#3d7755;color:var(--text)}.times{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:9px}.time{border:1px solid var(--line);background:#091510;color:#dce8e1;border-radius:13px;padding:13px 8px;text-align:center;cursor:pointer}.time small{display:block;color:var(--muted);margin-top:4px}.time.active{background:#3d775533;border-color:#70b88a}.time.full{opacity:.4;cursor:not-allowed}.time.full small{color:var(--red)}button#submit{width:100%;border:0;border-radius:14px;padding:17px;background:var(--green);color:#07110e;font-weight:bold;font-size:14px;cursor:pointer}button#submit:disabled{opacity:.5}button#submit span{float:left;font-size:20px}#msg{min-height:25px;margin-top:13px;font-size:12px}.ok{color:#8fd5a6}.err{color:var(--red)}footer{text-align:center;color:#53675d;font-size:10px;padding:25px}@media(max-width:560px){.page{padding-top:30px}.card{padding:20px}.two{grid-template-columns:1fr}.times{grid-template-columns:repeat(2,1fr)}}
/* ===== فونت دوران ===== */
@font-face {
    font-family: 'Doran';
    src: url('./font/Doran-ExtraBold.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: 'Doran', Tahoma, sans-serif !important;
}
/* =========================================================
   ALMAHDI — MASTER VISUAL THEME
   GEOMETRIC BACKGROUND + GREEN PREMIUM STYLE
   بدون تغییر Layout / Icon Size / Icon Position
========================================================= */


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

:root {
    --master-bg: #f3faf7;
    --master-primary: #18b98d;
    --master-primary-dark: #0d8f6d;
    --master-text: #12382d;
    --master-muted: #648078;
    --master-border: rgba(24,185,141,.15);
}


/* =========================================================
   BASE
========================================================= */

html {
    background: var(--master-bg) !important;
}

body {

    background-color:
        var(--master-bg) !important;

    color:
        var(--master-text);

    position: relative;

    overflow-x: hidden;
}


/* =========================================================
   ⭐ GEOMETRIC BACKGROUND
   این بخش طرح اصلی را به همه صفحات می‌دهد
========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 0;

    opacity: .22;

    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23117e5f' stroke-width='0.8' opacity='.72'%3E%3Cpath d='M22.5 0L45 13L67.5 0L90 13L90 39L67.5 52L67.5 78L45 90L22.5 78L0 90L0 64L22.5 51L22.5 26L0 13L22.5 0Z'/%3E%3Cpath d='M22.5 26L45 39L67.5 26L67.5 52L45 65L22.5 52Z'/%3E%3Cpath d='M0 39L22.5 26L45 39L45 65L22.5 78L0 65Z'/%3E%3Cpath d='M45 13L45 39L67.5 52L90 39'/%3E%3Cpath d='M22.5 51L45 39L67.5 52'/%3E%3C/g%3E%3C/svg%3E"),

        radial-gradient(
            circle at 15% 10%,
            rgba(24,185,141,.10),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 85%,
            rgba(24,185,141,.08),
            transparent 30%
        );

    background-repeat:
        repeat,
        no-repeat,
        no-repeat;

    background-size:
        135px 135px,
        auto,
        auto;

    background-position:
        center top,
        top left,
        bottom right;
}


/* =========================================================
   صفحه‌های اصلی را شفاف می‌کنیم
   تا هندسه پشتشان دیده شود
   این بخش به کارت‌ها دست نمی‌زند
========================================================= */

main,
.page,
.main,
.container,
.gallery-container,
.login-page,
.content,
.site-main,
.main-content {

    background:
        transparent !important;
}


/* =========================================================
   CONTENT ABOVE BACKGROUND
========================================================= */

body > * {

    position: relative;
    z-index: 1;
}


/* =========================================================
   MASTER VARIABLES
========================================================= */

body {

    --primary:
        var(--master-primary);

    --primary-dark:
        var(--master-primary-dark);

    --text:
        var(--master-text);

    --muted:
        var(--master-muted);

    --border:
        var(--master-border);
}


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

.header,
.topbar,
.site-header {

    background:
        rgba(248,253,250,.90) !important;

    border-color:
        rgba(24,185,141,.13) !important;

    backdrop-filter:
        blur(18px);
}


/* =========================================================
   NAV
========================================================= */

.header nav a,
.nav a,
.site-nav a,
.sidebar-nav a {

    color:
        #58756b !important;
}

.header nav a:hover,
.header nav a.active,
.nav a:hover,
.nav a.active,
.site-nav a:hover,
.site-nav a.active,
.sidebar-nav a:hover,
.sidebar-nav a.active {

    color:
        var(--master-primary) !important;
}


/* =========================================================
   CARDS
   اندازه و جای آیکون‌ها دست نخورده
========================================================= */

.card,
.panel,
.stat-card,
.category-card,
.image-card,
.login-card,
.featured,
.upload-panel,
.toolbar,
.posts-panel,
.welcome-card,
.about-card,
.program-card,
.contact-card,
.servant-card,
.gallery-item,
.memories-section,
.hero-card,
.modal-card,
.modalbox {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(237,248,243,.96)
        ) !important;

    border-color:
        var(--master-border) !important;

    box-shadow:
        0 18px 50px
        rgba(4,58,44,.10) !important;
}


/* =========================================================
   GREEN ELEMENTS
========================================================= */

.primary-btn,
.green-btn,
.read,
.view-gallery,
.search button {

    background:
        var(--master-primary) !important;

    color:
        #ffffff !important;
}


.primary-btn:hover,
.green-btn:hover,
.read:hover {

    background:
        var(--master-primary-dark) !important;
}


/* =========================================================
   LABELS / TITLES
========================================================= */

.label,
.eyebrow,
.tag,
.hero-small,
.category-count,
.cardtext label,
.category-info h3,
.section-heading > span,
.section-heading h2 span {

    color:
        var(--master-primary) !important;
}


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

input,
textarea,
select {

    background:
        rgba(250,254,252,.96) !important;

    color:
        var(--master-text) !important;

    border-color:
        var(--master-border) !important;
}


/* =========================================================
   ICONS
   ⚠️ فقط رنگ
   ❌ بدون width
   ❌ بدون height
   ❌ بدون position
   ❌ بدون margin
   ❌ بدون padding
========================================================= */

.logo-icon,
.brand-mark,
.brand-icon,
.quick-icon,
.servant-avatar,
.login-icon,
.admin-avatar,
.avatar,
.nav-icon,
.search-btn,
.menu-btn {

    color:
        var(--master-primary) !important;
}


/* =========================================================
   ICON BOX
========================================================= */

.logo-icon,
.brand-mark,
.brand-icon,
.quick-icon,
.servant-avatar,
.login-icon,
.admin-avatar,
.avatar {

    background:
        rgba(24,185,141,.09) !important;

    border-color:
        rgba(24,185,141,.18) !important;
}


/* =========================================================
   HERO
========================================================= */

.hero {

    border-color:
        rgba(24,185,141,.16) !important;

    box-shadow:
        0 25px 75px
        rgba(3,55,42,.12) !important;
}


/* =========================================================
   TEXT
========================================================= */

.hero p,
.cardtext p,
.category-info p,
.topbar p,
.section-heading p,
.panel > small,
.feature-text p,
.modalbody p,
.modalbody div {

    color:
        var(--master-muted) !important;
}


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

.ghost-btn,
.back-btn,
.small-btn,
.secondary-btn {

    border-color:
        var(--master-border) !important;

    color:
        var(--master-text) !important;
}


/* =========================================================
   GALLERY / IMAGE
========================================================= */

.category-card,
.image-card,
.gallery-item {

    overflow: hidden;
}


/* =========================================================
   FOOTER
========================================================= */

footer,
.footer {

    background:
        rgba(243,250,247,.90) !important;

    border-color:
        rgba(24,185,141,.12) !important;
}


/* =========================================================
   MODAL
========================================================= */

.modal {

    background:
        rgba(3,24,17,.58) !important;

    backdrop-filter:
        blur(9px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    body::before {

        opacity:
            .16;

        background-size:
            95px 95px,
            auto,
            auto;
    }
}


/* =========================================================
   ⭐ MUHARRAM MODE
   body class="moharram"
========================================================= */

body.moharram {

    --master-bg:
        #020604;

    --master-primary:
        #35ff9a;

    --master-primary-dark:
        #11c96e;

    --master-text:
        #effff6;

    --master-muted:
        #88a095;

    --master-border:
        rgba(53,255,154,.15);

    background-color:
        #020604 !important;
}


/* =========================================================
   MUHARRAM BACKGROUND
   قرمز انتزاعی، نه واقعی
========================================================= */

body.moharram::before {

    opacity:
        .36;

    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%2335ff9a' stroke-width='.7' opacity='.20'%3E%3Cpath d='M22.5 0L45 13L67.5 0L90 13L90 39L67.5 52L67.5 78L45 90L22.5 78L0 90L0 64L22.5 51L22.5 26L0 13L22.5 0Z'/%3E%3Cpath d='M22.5 26L45 39L67.5 26L67.5 52L45 65L22.5 52Z'/%3E%3C/g%3E%3C/svg%3E"),

        radial-gradient(
            ellipse 100px 50px at 8% 18%,
            rgba(170,12,30,.58),
            transparent 72%
        ),

        radial-gradient(
            ellipse 55px 100px at 82% 12%,
            rgba(210,18,40,.42),
            transparent 70%
        ),

        radial-gradient(
            ellipse 110px 55px at 68% 76%,
            rgba(160,8,28,.46),
            transparent 72%
        ),

        radial-gradient(
            ellipse 50px 100px at 18% 86%,
            rgba(190,15,38,.38),
            transparent 70%
        ),

        #020604;

    background-size:
        135px 135px,
        380px 320px,
        420px 360px,
        500px 390px,
        430px 370px;

    background-repeat:
        repeat;
}


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

body.moharram .card,
body.moharram .panel,
body.moharram .stat-card,
body.moharram .category-card,
body.moharram .image-card,
body.moharram .login-card,
body.moharram .featured,
body.moharram .upload-panel,
body.moharram .toolbar,
body.moharram .posts-panel,
body.moharram .welcome-card,
body.moharram .about-card,
body.moharram .program-card,
body.moharram .contact-card,
body.moharram .servant-card,
body.moharram .gallery-item,
body.moharram .memories-section,
body.moharram .hero-card,
body.moharram .modal-card,
body.moharram .modalbox {

    background:
        rgba(5,14,10,.90) !important;

    color:
        #effff6 !important;

    border-color:
        rgba(53,255,154,.14) !important;
}


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

body.moharram .header,
body.moharram .topbar,
body.moharram .site-header {

    background:
        rgba(2,8,5,.92) !important;

    border-color:
        rgba(53,255,154,.14) !important;
}


/* =========================================================
   MUHARRAM GREEN
========================================================= */

body.moharram .label,
body.moharram .eyebrow,
body.moharram .tag,
body.moharram .hero-small,
body.moharram .category-count,
body.moharram .cardtext label {

    color:
        #35ff9a !important;
}


/* =========================================================
   MOBILE MUHARRAM
========================================================= */

@media (max-width: 720px) {

    body.moharram::before {

        opacity:
            .27;

        background-size:
            95px 95px,
            240px 210px,
            280px 240px,
            320px 260px,
            280px 240px;
    }
}