/* MarkOnline customer-facing Notification Center */
:root {
    --mark-nc-brand: var(--brand, var(--primary, #eb5e28));
    --mark-nc-brand-dark: var(--brand-600, var(--primary-dark, #d84d1c));
    --mark-nc-brand-soft: var(--brand-soft, #fff0e8);
}

.mark-notification-bell {
    position: relative;
    z-index: 75;
    flex: none;
}

.mark-notification-trigger {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--line, #eceef2);
    border-radius: 13px;
    background: var(--canvas, #f4f5f7);
    color: var(--ink, #202633);
    font: inherit;
    font-size: 18px;
    cursor: pointer;
    transition: .18s ease;
}

.mark-notification-trigger:hover,
.mark-notification-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--mark-nc-brand) 35%, transparent);
    background: var(--mark-nc-brand-soft);
    color: var(--mark-nc-brand-dark);
}

.mark-notification-bell.is-compact .mark-notification-trigger {
    display: grid;
}

.mark-notification-badge {
    position: absolute;
    inset-block-start: -5px;
    inset-inline-end: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--surface, #fff);
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 4px 10px rgb(239 68 68 / 28%);
}

.mark-notification-panel {
    position: absolute;
    inset-block-start: calc(100% + 12px);
    inset-inline-end: 0;
    width: min(390px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid var(--line, #eceef2);
    border-radius: 20px;
    background: var(--surface, #fff);
    color: var(--ink, #202633);
    box-shadow: 0 24px 70px rgb(25 32 48 / 18%);
    z-index: 1005;
}

.mark-notification-panel[hidden] {
    display: none !important;
}

.mark-notification-panel::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mark-nc-brand), #f5a800, #e0306e);
    content: "";
}

.mark-notification-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 15px;
    border-bottom: 1px solid var(--line, #eceef2);
}

.mark-notification-panel__head > div {
    display: grid;
    gap: 2px;
}

.mark-notification-panel__eyebrow {
    color: var(--mute, #9aa0ab);
    font-size: 10px;
    font-weight: 700;
}

.mark-notification-panel__head strong {
    font-size: 15px;
    font-weight: 900;
}

.mark-notification-panel__head > a {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    background: var(--canvas, #f4f5f7);
    color: var(--slate, #6b7280);
    transition: .15s;
}

.mark-notification-panel__head > a:hover {
    background: var(--mark-nc-brand-soft);
    color: var(--mark-nc-brand-dark);
}

.mark-notification-panel__list {
    max-height: min(430px, 62vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.mark-notification-mini {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 8px;
    gap: 11px;
    align-items: start;
    padding: 14px 18px;
    color: inherit;
    text-decoration: none;
    transition: .15s;
}

.mark-notification-mini + .mark-notification-mini {
    border-top: 1px solid var(--line, #eceef2);
}

.mark-notification-mini:hover {
    background: color-mix(in srgb, var(--mark-nc-brand-soft) 50%, #fff);
}

.mark-notification-mini.is-unread {
    background: color-mix(in srgb, var(--mark-nc-brand-soft) 38%, #fff);
}

.mark-notification-mini__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 15px;
}

.tone-success .mark-notification-mini__icon,
.mark-notification-mini__icon.tone-success { background: #e8f8ef; color: #129653; }
.tone-warning .mark-notification-mini__icon,
.mark-notification-mini__icon.tone-warning { background: #fff5dc; color: #b77908; }
.tone-critical .mark-notification-mini__icon,
.mark-notification-mini__icon.tone-critical { background: #feeaee; color: #e13d62; }
.tone-info .mark-notification-mini__icon,
.mark-notification-mini__icon.tone-info { background: #eaf2ff; color: #377bd8; }

.mark-notification-mini__body {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.mark-notification-mini__body strong {
    overflow: hidden;
    color: var(--ink, #202633);
    font-size: 12.5px;
    font-weight: 850;
    line-height: 1.65;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mark-notification-mini__body > span:not(.nc-jalali-datetime) {
    display: -webkit-box;
    overflow: hidden;
    color: var(--slate, #6b7280);
    font-size: 11px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mark-notification-mini .nc-jalali-datetime {
    color: var(--mute, #9aa0ab);
    font-size: 9.5px;
}

.mark-notification-mini__dot {
    width: 7px;
    height: 7px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--mark-nc-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mark-nc-brand) 12%, transparent);
}

.mark-notification-panel__empty {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 38px 20px;
    color: var(--mute, #9aa0ab);
    text-align: center;
}

.mark-notification-panel__empty > span {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 5px;
    place-items: center;
    border-radius: 18px;
    background: var(--canvas, #f4f5f7);
    color: var(--slate, #6b7280);
    font-size: 20px;
}

.mark-notification-panel__empty strong { color: var(--ink, #202633); font-size: 13px; }
.mark-notification-panel__empty small { font-size: 10.5px; }

.mark-notification-panel__foot {
    padding: 11px 18px;
    border-top: 1px solid var(--line, #eceef2);
    background: var(--canvas, #f4f5f7);
}

.mark-notification-panel__foot a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--mark-nc-brand-dark);
    font-size: 11.5px;
    font-weight: 850;
}

.notification-page {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.notification-hero {
    position: relative;
    display: grid;
    grid-template-columns: 68px minmax(260px, 1fr) auto;
    gap: 20px;
    align-items: center;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 28px 30px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 8% 10%, rgb(255 255 255 / 22%), transparent 27%),
        linear-gradient(120deg, var(--mark-nc-brand-dark), var(--mark-nc-brand) 58%, #f7a928);
    color: #fff;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--mark-nc-brand) 24%, transparent);
}

.notification-hero::after {
    position: absolute;
    inset-inline-end: -35px;
    inset-block-end: -70px;
    width: 220px;
    height: 220px;
    border: 30px solid rgb(255 255 255 / 9%);
    border-radius: 50%;
    content: "";
}

.notification-hero__icon {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 26%);
    border-radius: 22px;
    background: rgb(255 255 255 / 16%);
    font-size: 28px;
    backdrop-filter: blur(8px);
}

.notification-hero__copy { position: relative; z-index: 1; }
.notification-hero__copy > span { font-size: 11px; font-weight: 700; opacity: .8; }
.notification-hero__copy h1 { margin: 2px 0 4px; color: #fff; font-size: clamp(22px, 3vw, 32px); }
.notification-hero__copy p { margin: 0; max-width: 620px; color: rgb(255 255 255 / 84%); font-size: 12.5px; }

.notification-hero__stats {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
}

.notification-hero__stats > div {
    display: grid;
    min-width: 88px;
    gap: 2px;
    padding: 12px 16px;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 17px;
    background: rgb(255 255 255 / 13%);
    text-align: center;
    backdrop-filter: blur(10px);
}

.notification-hero__stats strong { font-size: 20px; font-weight: 900; }
.notification-hero__stats span { font-size: 9.5px; opacity: .78; }

.notification-hero__actions {
    position: relative;
    z-index: 1;
    display: flex;
    grid-column: 2 / -1;
    flex-wrap: wrap;
    gap: 9px;
}

.notification-btn,
.notification-filter-submit,
.notification-preference-card button[type="submit"] {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 850;
    cursor: pointer;
    transition: .16s ease;
}

.notification-btn.is-light { background: #fff; color: var(--mark-nc-brand-dark); }
.notification-btn.is-solid { background: var(--mark-nc-brand-dark); color: #fff; }
.notification-hero .notification-btn.is-solid { background: rgb(61 31 16 / 28%); }
.notification-btn.is-muted { border: 1px solid var(--line); background: var(--surface-2, #f6f7fa); color: var(--ink-2, #4b5263); }
.notification-btn:hover { transform: translateY(-1px); }

.notification-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, .55fr)) auto auto auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
    padding: 15px;
    border: 1px solid var(--line, #e7e9f0);
    border-radius: 18px;
    background: var(--surface, #fff);
    box-shadow: var(--shadow-sm, 0 5px 18px rgb(22 31 50 / 6%));
}

.notification-filters label { display: grid; gap: 5px; color: var(--muted, #8a91a1); font-size: 10px; font-weight: 750; }
.notification-filters input[type="search"],
.notification-filters select {
    width: 100%;
    height: 42px;
    border: 1px solid var(--line, #e7e9f0);
    border-radius: 12px;
    outline: 0;
    background: var(--surface-2, #f6f7fa);
    color: var(--ink, #1a1e29);
    font: inherit;
    font-size: 11.5px;
    transition: .15s;
}

.notification-filters select { padding: 0 10px; }
.notification-filters input[type="search"] { padding: 0 38px 0 12px; }
.notification-filters input:focus,
.notification-filters select:focus { border-color: var(--mark-nc-brand); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mark-nc-brand) 10%, transparent); }

.notification-search { position: relative; }
.notification-search > i { position: absolute; inset-inline-start: 13px; inset-block-end: 13px; z-index: 1; color: var(--muted); }
.notification-filter-submit { height: 42px; background: var(--mark-nc-brand); color: #fff; }
.notification-filter-reset { display: grid; height: 42px; place-items: center; color: var(--muted); font-size: 10.5px; font-weight: 750; }

.notification-archive-filter {
    display: flex !important;
    height: 42px;
    align-items: center;
    gap: 7px !important;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    white-space: nowrap;
}

.notification-archive-filter input { accent-color: var(--mark-nc-brand); }

.notification-list { display: grid; gap: 10px; }

.notification-card {
    --notice-tone: #64748b;
    --notice-soft: #f2f4f7;
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
    overflow: hidden;
    padding: 18px 20px;
    border: 1px solid var(--line, #e7e9f0);
    border-radius: 18px;
    background: var(--surface, #fff);
    color: var(--ink, #1a1e29);
    box-shadow: var(--shadow-sm, 0 5px 18px rgb(22 31 50 / 5%));
    transition: .18s ease;
}

.notification-card::before {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--notice-tone);
    content: "";
}

.notification-card.is-unread { background: color-mix(in srgb, var(--notice-soft) 35%, #fff); }
.notification-card:hover { border-color: color-mix(in srgb, var(--notice-tone) 35%, var(--line)); transform: translateY(-1px); box-shadow: 0 12px 28px rgb(22 31 50 / 8%); }
.notification-card.tone-info { --notice-tone: #3b82f6; --notice-soft: #e9f1fe; }
.notification-card.tone-success { --notice-tone: #15a95b; --notice-soft: #e5f6ed; }
.notification-card.tone-warning { --notice-tone: #e59b0d; --notice-soft: #fef4e0; }
.notification-card.tone-critical { --notice-tone: #f0506b; --notice-soft: #fdebee; }

.notification-card__icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 16px;
    background: var(--notice-soft);
    color: var(--notice-tone);
    font-size: 19px;
}

.notification-card__content { min-width: 0; }
.notification-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 5px; }
.notification-card__meta .nc-jalali-datetime { margin-inline-start: auto; color: var(--muted); font-size: 10px; }
.notification-chip { padding: 3px 8px; border-radius: 999px; background: var(--notice-soft); color: var(--notice-tone); font-size: 9.5px; font-weight: 800; }
.notification-chip.is-pinned { background: var(--amber-soft, #fef4e0); color: #a66d06; }
.notification-card h2 { margin: 0 0 3px; font-size: 14px; line-height: 1.8; }
.notification-card h2 a { color: inherit; }
.notification-card p { margin: 0; color: var(--ink-2, #4b5263); font-size: 11.5px; line-height: 1.9; }

.notification-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 11px; }
.notification-card__actions button,
.notification-text-link { padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 750; cursor: pointer; }
.notification-card__actions button:hover,
.notification-text-link:hover { color: var(--mark-nc-brand-dark); }
.notification-text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--notice-tone); }
.notification-card__unread { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--notice-tone); }

.notification-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 54px 20px;
    border: 1px dashed var(--line);
    border-radius: 20px;
    background: var(--surface);
    text-align: center;
}

.notification-empty > span { display: grid; width: 70px; height: 70px; margin-bottom: 5px; place-items: center; border-radius: 22px; background: var(--surface-2); color: var(--muted); font-size: 27px; }
.notification-empty h2 { margin: 0; font-size: 16px; }
.notification-empty p { margin: 0; color: var(--muted); font-size: 11.5px; }
.notification-empty a { margin-top: 5px; color: var(--mark-nc-brand-dark); font-size: 11px; font-weight: 800; }

.notification-pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--muted); font-size: 10.5px; }
.notification-pagination > div { display: flex; gap: 8px; }
.notification-pagination a { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-weight: 750; }

.notification-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; color: var(--muted); font-size: 10.5px; }
.notification-breadcrumb a { color: var(--ink-2); }
.notification-breadcrumb i { font-size: 8px; }

.notification-detail {
    --notice-tone: #64748b;
    --notice-soft: #f2f4f7;
    overflow: hidden;
    padding: clamp(22px, 4vw, 40px);
    border: 1px solid var(--line);
    border-top: 5px solid var(--notice-tone);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 16px 45px rgb(22 31 50 / 8%);
}

.notification-detail.tone-info { --notice-tone: #3b82f6; --notice-soft: #e9f1fe; }
.notification-detail.tone-success { --notice-tone: #15a95b; --notice-soft: #e5f6ed; }
.notification-detail.tone-warning { --notice-tone: #e59b0d; --notice-soft: #fef4e0; }
.notification-detail.tone-critical { --notice-tone: #f0506b; --notice-soft: #fdebee; }
.notification-detail__head { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.notification-detail__icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 20px; background: var(--notice-soft); color: var(--notice-tone); font-size: 24px; }
.notification-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 10.5px; }
.notification-detail__meta > span { padding: 3px 8px; border-radius: 999px; background: var(--notice-soft); color: var(--notice-tone); font-weight: 800; }
.notification-detail__meta .is-required { background: #fdebee; color: #d93d5c; }
.notification-detail__meta .nc-jalali-datetime { margin-inline-start: auto; }
.notification-detail h1 { margin: 7px 0 4px; font-size: clamp(20px, 3vw, 29px); line-height: 1.65; }
.notification-detail__head p { margin: 0; color: var(--ink-2); font-size: 12.5px; }
.notification-detail__image { display: block; width: min(100%, 820px); max-height: 430px; margin: 24px auto 0; border-radius: 18px; object-fit: cover; }
.notification-detail__body { padding: 25px 2px 8px; color: var(--ink-2); font-size: 13px; line-height: 2.1; }
.notification-detail__body h2,
.notification-detail__body h3 { color: var(--ink); }
.notification-detail__body a { color: var(--mark-nc-brand-dark); text-decoration: underline; text-underline-offset: 4px; }
.notification-detail__body img { max-width: 100%; border-radius: 15px; }
.notification-detail__references { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; margin-top: 15px; }
.notification-detail__references > * { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink-2); }
.notification-detail__references > * > span { display: grid; flex: 1; font-size: 11px; font-weight: 750; }
.notification-detail__references small { color: var(--muted); font-size: 9.5px; font-weight: 500; }
.notification-detail__deadline { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 11px 14px; border-radius: 13px; background: var(--notice-soft); color: var(--notice-tone); font-size: 11px; font-weight: 750; }
.notification-progress { height: 8px; overflow: hidden; margin-top: 16px; border-radius: 99px; background: var(--surface-2); }
.notification-progress span { display: block; height: 100%; border-radius: inherit; background: var(--notice-tone); }
.notification-detail__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.notification-detail__actions .nc-actions { display: contents; }
.notification-detail__actions .nc-button { min-height: 40px; padding: 8px 15px; border-radius: 12px; font: inherit; font-size: 11.5px; font-weight: 850; }
.notification-detail__actions .nc-button--primary { background: var(--notice-tone); }
.notification-back-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--muted); font-size: 11px; font-weight: 750; }

.notification-preferences-head {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 15px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 21px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.notification-preferences-head__icon { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 19px; background: var(--mark-nc-brand-soft); color: var(--mark-nc-brand-dark); font-size: 23px; }
.notification-preferences-head > div > span { color: var(--muted); font-size: 10px; font-weight: 750; }
.notification-preferences-head h1 { margin: 1px 0 2px; font-size: 23px; }
.notification-preferences-head p { margin: 0; color: var(--ink-2); font-size: 11.5px; }
.notification-preferences-head > a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 11px; background: var(--surface-2); color: var(--ink-2); font-size: 10.5px; font-weight: 750; }

.notification-flash,
.notification-preference-note { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; padding: 13px 15px; border-radius: 14px; font-size: 11px; }
.notification-flash.is-success { background: #e8f8ef; color: #117c48; }
.notification-flash.is-error { background: #fdebee; color: #cf3858; }
.notification-preference-note { border: 1px solid #d8e7ff; background: #eef5ff; color: #35679e; }
.notification-preference-note strong { display: block; color: #245681; }
.notification-preference-note p { margin: 2px 0 0; }

.notification-preferences-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.notification-preference-card {
    --pref-tone: #3b82f6;
    --pref-soft: #e9f1fe;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.notification-preference-card.tone-amber { --pref-tone: #d99108; --pref-soft: #fef4e0; }
.notification-preference-card.tone-green { --pref-tone: #15a95b; --pref-soft: #e5f6ed; }
.notification-preference-card.tone-rose { --pref-tone: #e04463; --pref-soft: #fdebee; }
.notification-preference-card.tone-violet { --pref-tone: #7257df; --pref-soft: #efebff; }
.notification-preference-card > header { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 17px; }
.notification-preference-card__icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: var(--pref-soft); color: var(--pref-tone); font-size: 18px; }
.notification-preference-card h2 { margin: 0 0 2px; font-size: 13px; }
.notification-preference-card header p { margin: 0; color: var(--muted); font-size: 9.8px; line-height: 1.7; }
.notification-switch { display: grid; grid-template-columns: auto; justify-items: center; gap: 3px; cursor: pointer; }
.notification-switch input { position: absolute; opacity: 0; pointer-events: none; }
.notification-switch > span { position: relative; width: 42px; height: 23px; border-radius: 99px; background: #dfe3e9; transition: .18s; }
.notification-switch > span::after { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgb(0 0 0 / 18%); content: ""; transition: .18s; }
.notification-switch input:checked + span { background: var(--pref-tone); }
.notification-switch input:checked + span::after { transform: translateX(-19px); }
.notification-switch b { color: var(--muted); font-size: 8.5px; }
.notification-quiet-hours { display: grid; grid-template-columns: minmax(130px, 1fr) repeat(2, minmax(100px, .7fr)); gap: 9px; align-items: end; padding: 13px 17px; border-block: 1px solid var(--line); background: var(--surface-2); }
.notification-quiet-hours__title { align-self: center; color: var(--ink-2); font-size: 10px; font-weight: 750; }
.notification-quiet-hours label { display: grid; gap: 4px; color: var(--muted); font-size: 8.5px; }
.notification-quiet-hours input { width: 100%; height: 35px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--surface); color: var(--ink); font: inherit; direction: ltr; }
.notification-quiet-hours input:focus { border-color: var(--pref-tone); }
.notification-preference-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 17px; }
.notification-preference-card > footer span { color: var(--muted); font-size: 9px; }
.notification-preference-card button[type="submit"] { min-height: 36px; padding: 7px 12px; background: var(--pref-tone); color: #fff; font-size: 10px; }

/* Adapt package surfaces to the MarkOnline storefront. */
.nc-surface { --nc-primary: var(--mark-nc-brand); --nc-surface: var(--surface, #fff); --nc-text: var(--ink, #202633); --nc-muted: var(--slate, #6b7280); --nc-border: var(--line, #eceef2); --nc-radius: var(--r-md, 14px); font-family: inherit; }
.nc-surface--bar .nc-notice { border-color: color-mix(in srgb, var(--nc-tone) 20%, var(--line)); box-shadow: none; }
.nc-surface--bar .nc-content { max-width: var(--container, 1200px); margin-inline: auto; padding: 10px 18px; }
.nc-surface--banner { width: min(calc(100% - 32px), var(--container, 1200px)); margin: 14px auto; }
.nc-surface--inline { margin-block: 14px; }
.nc-surface--card .nc-notice,
.profile-app .nc-surface .nc-notice { border-radius: 18px; box-shadow: var(--shadow-sm, 0 5px 18px rgb(22 31 50 / 6%)); }
.profile-app .nc-surface { margin-bottom: 14px; }
.nc-toast-stack { z-index: 1200; }
.nc-modal { z-index: 1250; }

.header-actions { overflow: visible; }
.topbar { overflow: visible; }

@media (max-width: 1100px) {
    .notification-filters { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, .7fr)); }
    .notification-filter-submit,
    .notification-filter-reset,
    .notification-archive-filter { grid-row: 2; }
}

@media (max-width: 820px) {
    .notification-hero { grid-template-columns: 58px 1fr; padding: 22px; }
    .notification-hero__icon { width: 58px; height: 58px; border-radius: 18px; }
    .notification-hero__stats { grid-column: 1 / -1; }
    .notification-hero__actions { grid-column: 1 / -1; }
    .notification-preferences-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .mark-notification-panel { position: fixed; inset-block-start: 74px; inset-inline: 10px; width: auto; max-height: calc(100dvh - 94px); }
    .mark-notification-panel__list { max-height: calc(100dvh - 225px); }
    .notification-page { padding-inline: 1px; }
    .notification-hero { grid-template-columns: 48px 1fr; gap: 13px; padding: 18px; border-radius: 20px; }
    .notification-hero__icon { width: 48px; height: 48px; border-radius: 15px; font-size: 21px; }
    .notification-hero__copy h1 { font-size: 21px; }
    .notification-hero__copy p { font-size: 10.5px; }
    .notification-hero__stats { width: 100%; }
    .notification-hero__stats > div { flex: 1; min-width: 0; }
    .notification-hero__actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .notification-filters { grid-template-columns: 1fr 1fr; padding: 12px; }
    .notification-search { grid-column: 1 / -1; }
    .notification-archive-filter { grid-row: auto; grid-column: 1 / -1; }
    .notification-filter-submit,
    .notification-filter-reset { grid-row: auto; }
    .notification-card { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding: 15px; }
    .notification-card__icon { width: 42px; height: 42px; border-radius: 13px; font-size: 16px; }
    .notification-card__meta .nc-jalali-datetime { width: 100%; margin: 2px 0 0; }
    .notification-card__actions { gap: 9px; }
    .notification-pagination { align-items: flex-start; gap: 10px; }
    .notification-detail { padding: 20px 16px; border-radius: 19px; }
    .notification-detail__head { grid-template-columns: 48px 1fr; gap: 12px; }
    .notification-detail__icon { width: 48px; height: 48px; border-radius: 15px; font-size: 18px; }
    .notification-detail__meta .nc-jalali-datetime { width: 100%; margin: 3px 0 0; }
    .notification-preferences-head { grid-template-columns: 50px 1fr; padding: 17px; }
    .notification-preferences-head__icon { width: 50px; height: 50px; border-radius: 16px; font-size: 19px; }
    .notification-preferences-head > a { grid-column: 1 / -1; justify-content: center; }
    .notification-preference-card > header { grid-template-columns: 43px minmax(0, 1fr) auto; padding: 14px; }
    .notification-preference-card__icon { width: 43px; height: 43px; }
    .notification-quiet-hours { grid-template-columns: 1fr 1fr; }
    .notification-quiet-hours__title { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .mark-notification-trigger,
    .notification-card,
    .notification-btn { transition: none; }
}