* {
    box-sizing: border-box;
}

html, body {
    height: auto;
    min-height: 100dvh;
    margin: 0;
}

body {
    margin: 0;
    font-family: Rubik, Heebo, Assistant;
    color: #000;
    position: relative;
    display: flex;
    flex-direction: column;
}


body.am-bg {
    position: relative;
}


body.am-bg {
    position: relative;
}

/* שכבת הרקע המלא – תמונה + גראדיאנטים */
body.am-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background: var(--bg);

    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-position: center center, center, center, center, center;
    background-attachment: fixed, fixed, fixed, fixed, fixed;
}


.sakura-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.4s ease;
}

html.theme-classic .sakura-layer {
    opacity: 1;
}

/* עלה בסיסי */
.sakura-petal {
    position: absolute;
    top: -10vh;
    width: 14px;
    height: 18px;
    background: radial-gradient(ellipse at 30% 30%, #ffeef5 0, #ffb7cc 40%, #ff8fa8 100%);
    border-radius: 60% 40% 60% 40%;
    box-shadow: 0 0 8px rgba(255, 180, 200, 0.6);
    opacity: 0.9;

    /* שתי אנימציות: נפילה + שינוי גוון עדין */
    animation-name: sakuraFall, sakuraTint;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

/* עלים גדולים יותר – “סטארים” */
.sakura-petal.big {
    width: 24px;
    height: 30px;
    box-shadow: 0 0 10px rgba(255, 170, 195, 0.9);
}

/* KEYFRAMES – נפילה */
@keyframes sakuraFall {
    0% {
        transform: translate3d(0, -10vh, 0) rotateZ(0deg);
    }
    50% {
        transform: translate3d(18px, 50vh, 0) rotateZ(180deg);
    }
    100% {
        transform: translate3d(-18px, 110vh, 0) rotateZ(360deg);
    }
}

/* KEYFRAMES – שינוי גוון עדין */
@keyframes sakuraTint {
    0% {
        filter: hue-rotate(0deg) saturate(110%);
    }
    100% {
        filter: hue-rotate(-18deg) saturate(135%);
    }
}




@keyframes magicTwinkle {
    0%   { opacity: 0; }
    50%  { opacity: 0.88; }  /* כמה חזק שהניצוצות יעלו – אפשר לשחק עם זה */
    100% { opacity: 0; }
}


a{
    color: black;
    text-decoration:none
}

.container {
    max-width: 1230px;
    width: 100%;
    padding: 30px;
    margin: 170px auto 70px auto;
    box-sizing: border-box;
    flex: 1 0 auto;
    min-height: 0;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 1px;
    background: var(--container-ly);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    color: var(--primary);
}

.row_games {
    width: 30%;
}

.deploy_flex {
    display: flex;
}

.row_rest {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.row_rest_divider {
    max-width: 100%;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.anm_hero {
    position: absolute;
    top: 148px;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;

    height: 120px;

    overflow: hidden;
    background: transparent;
    border: 1px solid var(--common-white-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);

    z-index: 5;
}

.anm_hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
            var(--header-hero);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* הווידאו ברקע – נשאר כפי שהוא, רק לוודא מיקומים */
.anm_video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;          /* מתחת לזכוכית */
    pointer-events: none;
}




/* אם יש לך מצב SCROLLED – נעשה אותו קצת עדין יותר */
.anm_hero.scrolled::before {
    background:
            linear-gradient(
                    180deg,
                    rgba(5, 25, 60, 0.32) 0%,
                    rgba(5, 25, 60, 0.18) 45%,
                    rgba(5, 25, 60, 0.05) 100%
            );
}

/* שכבה עליונה – הלוגו */
.anm_logo {
    background: url(../images/ail-hero2.png);
    width: 1100px;
    height: 469px;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 1; /* רק 1 מספיק, כי הווידאו מתחת */
    left: 50%;
    transform: translate(-50%, -69%);
    top: 215px;
    pointer-events: none;
}

/* לכבד משתמשים שביקשו פחות תנועה */
@media (prefers-reduced-motion: reduce) {
    .anm_video { display: none; }
}

.anm_logo {
    filter: drop-shadow(0 0 8px rgba(50,100,255,0.3));
    animation: glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse {
    0%,100% { filter: drop-shadow(0 0 8px rgba(50,100,255,0.3)); }
    50% { filter: drop-shadow(0 0 16px rgba(120,180,255,0.6)); }
}

.header_container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -69%);
    top: 130px;
}

.ani_merge {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header_container img {
    width: 100%;
    max-width: 188px;
}

.header_menu_box {
    background: #ffffff;
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    top: 60px;
    border-radius: 10px;
}

.anm_main_title {
    background: black;
    width: 100%;
    height: 320px;
    display: flex;
    padding: 25px 30px 25px 20px;
    justify-content: center;
    align-items: end;
    background-position: 50% 50%;
}

.anm_main_title_box {
    background: var(--carousel-layer);
    min-width: fit-content;
    max-width: fit-content;
    text-align: center;
    height: fit-content;
    box-shadow: var(--shadow-soft);
    border-radius: 30px;
    backdrop-filter: blur(5px);
}

.anm_main_title_box h1 {
    font-family: "Heebo";
    font-size: 16px;
    font-weight: 500;
    color: #466b8f;
    padding: 0 10px;
}

.anm_main_title_box a {
    color: var(--normal);
    text-shadow: var(--box-text-shadow);
}

/* ===== פעמון + דרופדאון נוטיפיקציות ===== */

.header-notifications {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
}

/* כפתור הפעמון */
.notif-bell {
    position: relative;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 20px;      /* גודל האימוג'י 🔔 */
    color: #fff;          /* תתאים לצבע ההדר */
}

/* באדג' מונה */
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff4b6a;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
    display: none; /* JS מדליק כשצריך */
}

/* הדרופדאון עצמו */
.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(340px, 90vw);
    background: var(--top-layers);
    color: var(--primary);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    padding: 4px 0;
    z-index: 999;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    direction: rtl;
    text-align: right;
    font-size: 16px;
}

/* כותרת הדרופדאון */
.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.notif-header span {
    font-weight: 600;
}

/* כפתור "סמן הכל כנקראו" */
#notifMarkAll {
    background: none;
    border: none;
    color: #9fd6ff;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}
#notifMarkAll:hover {
    background: rgba(159,214,255,0.12);
}

/* רשימה */
.notif-list {
    max-height: 320px;
    overflow-y: auto;
}

/* פריט נוטיפיקציה */
.notif-item {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.notif-item:hover {
    background: rgba(255, 255, 255, 0.34);
}

/* לא נקרא */
.notif-unread {
    background: rgba(159,214,255,0.10);
    border-right: 3px solid #9fd6ff;
}

/* הטקסט עצמו */
.notif-text {
    white-space: normal;
}

/* מטא – שם + זמן */
.notif-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    opacity: 0.8;
}
.notif-from {
    font-weight: 600;
}
.notif-time {
    font-family: inherit;
}

/* מצב שאין נוטיפיקציות */
.notif-empty {
    padding: 14px 10px;
    font-size: 12px;
    text-align: center;
    opacity: 0.75;
}

/* פוטר קטן (לעתיד) */
.notif-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 5px 10px 6px;
    text-align: center;
    font-size: 12px;
}
.notif-footer a {
    color: #9fd6ff;
    text-decoration: none;
}
.notif-footer a:hover {
    text-decoration: underline;
}

.notif-color {
    filter: var(--top-buttens);
}

/* טולטיפ קטן מעל הפעמון */
.notif-bell::after {
    content: "נוטיפיקציות";
    position: absolute;
    bottom: -22px;
    right: 50%;
    transform: translateX(50%) translateY(4px);
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1000;
}
.notif-bell:hover::after {
    opacity: 1;
    transform: translateX(50%) translateY(0);
}

.noti_icon {
    width: 30px !important;
    height: 30px !important;
    background-image: url('../images/noti.svg');
    background-size: cover;
    cursor: pointer;
    filter: var(--top-buttens);
}

.anm_hero_carousel{
    position: relative;
    width: 100%;
    min-width: 600px;
    height: 320px;
    overflow: hidden;
    border-radius: 10px;
    z-index: 999;
    border: 1px solid var(--common-white-border);
    box-shadow: var(--shadow_caru);

}

.anm_hero_carousel::before,
.anm_hero_carousel::after {
    content: "";
    position: absolute;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(
            to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.2) 50%,
            rgba(255,255,255,0) 100%
    );
    pointer-events: none;
}

.anm_hero_carousel::before {
    left: 0;
}
.anm_hero_carousel::after {
    right: 0;
}

.anm_hero_carousel .anm_main_title{
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease; /* קרוספייד עדין */
}

.anm_main_title {
    height: 320px;
}

.animes-items {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 15px;
    margin-bottom: 30px;
}

.anm_hero_carousel .anm_main_title.is-active{
    opacity: 1;
    pointer-events: auto;
}

.anm_arrow{
    position: absolute;
    top: 50%;
    border: 0;
    border-radius: 100%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    background: var(--carousel-layer);
    backdrop-filter: blur(10px);
    font-size: 24px; font-weight: 900; line-height: 1;
    cursor: pointer;
    z-index: 10;
    color: var(--primary);
}
.anm_prev{ left: 12px; }
.anm_next{ right: 12px; }
.anm_arrow:hover{ background: #1f518b; color:#fff; }


.anm_hero_layer{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .6s ease;
}

.anm_hero_layer.is-visible{
    opacity: 1;
}

.menu_layer a {
    color: #fff;
}

.soon {
    display: inline-block;
    width: fit-content;
    font-size: 11px;
    color: #ff3b3b;
    background: rgba(255, 59, 59, 0.10);
    padding: 2px 6px;
    border-radius: 6px;
    margin-right: 6px;
    font-weight: 700;
    animation: soon-blink 1.2s infinite;
}

@keyframes soon-blink {
    0% { opacity: 1; }
    50% { opacity: 0.45; }
    100% { opacity: 1; }
}



/* --- NAV GLASS PILLS FINAL --- */

.menu_layer {
    width: 100%;
    position: relative;
    z-index: 20;
    display: flex;
    top: -6px;
    justify-content: center;
}

/* העטיפה של כל הלינקים */
.menu_layer ul {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 6px 16px;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* מבטלים את העיצוב הישן של li */
.menu_layer li {
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* הכפתור עצמו זה ה-a */
.menu_layer a {
    display: block;
    padding: 7px 20px;
    border-radius: 10px;
    background: var(--menu-button);
    color: var(--primary);
    border-top: 1px solid var(--common-white-border);
    border-left: 1px solid var(--common-white-border);
    font-size: 15px;
    backdrop-filter: blur(5px);
    font-weight: 500;
    text-shadow: none;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease;
}



/* hover */
.menu_layer a:hover {
    background: var(--side-buttons);
    transform: translateY(-1px);
    box-shadow: var(--menu-layer-hover);
}

/* עמוד פעיל – תתאם למחלקה שלך אם יש */
.menu_layer a.is-active {
    background: linear-gradient(135deg, #4f6fe8, #7b9dff);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(70, 100, 210, 0.8);
}


.megamenu_layer {
    background: var(--megamenu-layer);
    max-width: 1180px;
    width: 100%;
    position: absolute;
    height: 250px;
    top: 290px;
    transform: translate(-50%, -50%);
    left: 50%;
    z-index: 999999999;
    justify-content: right;
    display: none;
    transition: opacity .2s ease;
    opacity: 0;
    backdrop-filter: blur(10px);
    padding: 24px;
    border-radius: 30px;
    color: var(--primary);
    box-shadow: var(--shadow_caru);
}

.megamenu_layer a, .megamenu_layer  {
    color: var(--primary);
}

.gradient-header {
    background: var(--header-gradient);
    width: 100%;

    margin: 0 auto;
    height: 115px;
    position: relative;
    top: 200px;
    border-radius: 10px;
}

.megamenu_container {
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1180px;
    z-index: 9999;
}

.megamenu_layer.is-active {
    display: flex;
    opacity: 1;
}

.megamenuimg img {
    width: 250px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.megamenu_cell p {
    margin-top: 15px;
}

.megamenu_cell {
    padding: 0 15px;
    min-width: 280px;
    max-width: 100%;
}

.megamenu_cell input {
    background: var(--base-input);
    color: var(--primary);
    padding: 6px;
}

.megamenu_cell button {
    border: 0;
    background: #1f518b;
    color: #fff;
    padding: 9px;
}

.mega-flex {
    display: flex;
    padding: 10px 0;
    align-items: center;
}

.megamenu_cell ul, li {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding-right: 5px;
    font-family: Rubik;
}

.megamenu_cell ul a, li a {
    color: var(--primary);
}

.megamenu_cell li {
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: padding-right ease-in 0.1s;
    margin: 4px 0;
    width: fit-content;
}

.megamenu_cell li:hover {
    padding-right: 15px;
}

.megamenu_cell h2 {
    font-size: 23px !important;
    margin: 0;
    color: #000;
    font-weight: 600 !important;
}

.megamenu_cell h2 {
    border-bottom: 1px solid var(--megamenu-line);
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.top_devider_addon {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 10px;
}

.website-container {
    color: black;
}

.userline_layer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 15px 20px;
    font-size: 16px;
    height: 120px;
}

.little_avatar {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 5px;
    margin: 0 10px;
}

.uplinks {
    padding: 5px;
}

.uplinks p {
    margin: 0 0 0 5px;
    display: inline;
    border: 2px solid rgba(255, 255, 255, 0.37);
    padding: 5px;
}

.uplinks p:hover {
    background: rgb(0, 0, 0);
}

.userbar {
    display: flex;
    justify-content: left;
    align-items: center;
    min-width: 200px;
}

.top-off {
}

.top-off_horizon {
    width: 100% !important;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--line-primary);

}

.submenu_links a {
    color: #436b8a;
}

.messanger-corner {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 300px;
    padding: 15px;
    border-top-left-radius: 30px;
    color: #326795;
    font-size: 15px;
    font-weight: 500;
    background: linear-gradient(180deg, rgba(230, 235, 241, 0.83), rgba(230, 235, 241, 0.8));
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,.06);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.messanger-status-badge {
    background: #0a6aa1;
    padding: 6px;
    color: white;
    border-radius: 10px;
    margin: 10px;
}

.container_h2 {
    color: #0a6aa1;
    font-weight: 500;
    font-size: 30px;
    text-align: center;
}

.latest_feed {
    min-height: inherit;
    width: 25%;
    padding: 15px;
    font-size: 14px;
    color: white;
}

.latest_feed h2 {
    font-size: 16px;
    color: white;
    margin-top: 0;
    width: 100%;
    border-bottom: 3px solid black;
    padding-bottom: 7px;
}

.anm_articles_container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    position: relative;
}

.anm_article_box {
    width: 49%;
    transition: background-color .2s ease;
    display: flex;
    align-items: center;
    box-shadow: var(--article-box-shadow);
    position: relative;
    background: var(--article-box);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 10px;
    border: 1px solid var(--article-box-border);
    gap: 5px;
}

.anm_article_box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 6%;
    width: 88%;
    height: 1px;
    background: var(--article-box-shadow-before);
    pointer-events: none;
}

.anm_article_inner {
    padding: 10px;
    width: 100%;
}

.anm_article_inner p {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    background: var(--article-tags);
    margin: 0 0 0 10px;
    justify-self: end;
    padding: 5px;
    border-radius: 15px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12)
}

.anm_article_inner h3 {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--muted);
    font-weight: 300;
}

.anm_article_inner div:last-child {
    display: flex;
    justify-self: end;
    margin-top: 10px;
}

.anm_article_box h2 {
    margin: 0;
    padding: 10px 0;
    border-bottom: 0;
    font-size: 17px;
    color: var(--primary);
    font-weight: 700;
}

.anm_article_box img {
    width: 140px;
    max-width: 140px;
    min-width: 140px;
    height: 125px;
    min-height: 125px;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 7px;
    margin-top: 7px;

}

.anm_tags {
    width: fit-content;
    border: 3px solid #eee;
    background: white;
    padding: 3px;
    border-radius: 15px;
    color: #23587a;
    margin: 10px 0;
    font-size: 13px;
    font-weight: 500;
}

.anm_tags_container {
    display: flex;
    width: 100%;
    justify-content: right;
}

.submenu_container {
    position: absolute;
    top: 445px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.submenu_links {
    background: #fff;
    max-width: 540px;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    margin-top: -4px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom: 6px solid #efefef;
    border-left: 6px solid #efefef;
    border-right: 6px solid #efefef;
}

.sub-active-now {
    font-weight: 700 !important;
    padding: 5px 10px !important;
    background: var(--sub-active) !important;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    color: white !important;
}

.sub-active-now a {
    color: white !important;
}

.submenu_links ul, .submenu_links li {
    color: #3f6595;
    font-size: 16px !important;
    font-weight: 500;
    list-style: none;
    margin: 0;
    padding: 5px;
    display: flex;
}

.megamenu_cell h2 {
    color: var(--secondery);
}

.megamenu_cell h2 {
    font-size: 18px;
    font-weight: 500;
}

.megamenu_cell a {
    color: #000000;
    font-weight: 500;
}

.submenu_links li {
    margin-left: 30px
}

.submenu_links li:last-child {
    margin-left: 0;
}

.apply-some-gap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.anm_title {
    max-width: 1200px;
    width: 100%;
    background: var(--cta-text-layer);
    background-position: center;
    color: var(--primary);
    border-radius: 5px;
    padding: 10px;
    font-weight: 500;
}

.anm_title_reverse {
    border: 6px solid rgb(66, 105, 142);
    max-width: 1200px;
    width: 100%;
    background: #5c7d9e;
    background-position: center;
    color: #f3f3f3;
    border-radius: 5px;
    padding: 10px;
    font-weight: 500;
}

.anm_flexarea {
    display: flex;
    justify-content: right;
    gap: 5px;
    width: 100%;
    max-width: 1200px;
}

.anm_flexarea_s {
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.anm_flexarea_u {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 10px;
    flex-direction: row-reverse;
}

.additional_flex_wrap {
    max-width: 1200px;
    flex-wrap: wrap;
    margin: 20px auto;
}

.live-presence {
    margin-top: 10px;
    font-size: 14px;
}

.live-users {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.live-user {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,0,0,0.05);
    padding: 3px 6px;
    border-radius: 12px;
}

.live-user img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.live-users { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.live-user { display:flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; background:rgba(0,0,0,0.06); }
.live-user img { width:22px; height:22px; border-radius:50%; object-fit:cover; }


.animes_box {
    width: 100%;
    position: relative;
    box-shadow: var(--anime-box-shadow);
    background: var(--article-tags);
    border-radius: 10px;
}

.anime_label_name {
    position: absolute;
    bottom: 15px;
    left: 6px;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    color: #fff;
    border-radius: 15px;
    font-weight: 500;
    text-align: center;
    width: max-content;
    z-index: 9;
    font-size: 13px;
}

.anime_label_name {
    backdrop-filter: blur(6px);
    background: rgba(205, 13, 13, 0.4);
    padding: 6px 14px;
}


.animes_box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.1s ease-in;
    border: var(--anime-box-border);
}


.anime-imgs-overly {
    position: absolute;
    width: 100%;
    height: 100%;
    color: white;
    background-color: var(--animes-overly);
    padding: 10px;
    top: -2px;
    border-radius: 10px;
    transition: background-color 0.1s ease-in;
}

.anime-imgs-overly:hover {
    background-color: rgba(255, 255, 255, 0);
}



.animes_box img:hover {
    transform: scale(1.1);
}

.off-divider {
    width: 100%;
}

.update_text_h2 {
    width: 100%;
    border-radius: 30px;
    padding: 0px;
    font-size: 25px;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.update_text {
    font-size: 15px;
    font-family: Rubik;
    padding: 15px;
    background: rgb(255, 255, 255);
    margin: 20px 0;
    color: var(--normal);
    border-radius: 30px;
}

.time_text {
    font-size: 13px;
    font-family: Rubik;
}

.upcell {
    width: 50%;
}

.upwindow {
    width: 100%;
    padding: 30px;
    background: var(--update-body);
    box-shadow: 0 4px 10px rgba(75, 126, 177, 0.08);
    color: var(--primary);
    border-radius: 10px;
}

.next-update {
    color: var(--primary);
    padding: 33px;
}

.feed-filters-box .filter-options {
    display: none;
}

.upbreak {
    margin-bottom: 5px;
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 10px;
    background: var(--update-header);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    border-bottom: 1px solid var(--common-white-border);
    border-left: 1px solid var(--common-white-border);

}

.upbreak img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.other_ups {
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.userbar--collapsed{ gap:10px }

.ub-avatar-only{
    width:34px; height:34px; border-radius:999px; padding:0; border:1px solid #ffffff12;
    background:#ffffff08; display:grid; place-items:center; cursor:pointer; transition:.15s;
}
.ub-avatar-only:hover{ background:#ffffff14 }
.ub-avatar-only img{ margin: -10px -20px 0px 0; width: 50px; height: 50px; object-fit: cover; border-radius:999px; }

/* Sheet נפתח (dropdown רחב ונקי) */
.ub-sheet{
    position:absolute; inset-inline-end:14px; top:60px;
    left: 50%;
    transform: translateY(-50%);
    width:320px; background: rgba(255, 255, 255, 0.86); border-radius:10px;
    padding:14px; backdrop-filter: blur(10px); display:none; z-index:9999;
}
.ub-sheet.show{ display:block; animation: ubPop .18s ease both }
@keyframes ubPop{ from{ opacity:0; transform:translateY(-6px) scale(.98) } to{ opacity:1; transform:none } }

.ub-sheet-head{ display:flex; gap:12px; align-items:center; margin-bottom:10px }
.ub-sheet-ava{ width:42px; height:42px; border-radius:999px; object-fit:cover }
.ub-sheet-name{ font-weight:700 }
.ub-sheet-row{ display:flex; gap:8px; margin-top:6px }

.ub-sheet-menu{ list-style:none; margin:8px 0 0; padding:0 }
.ub-sheet-menu a{ display:block; padding:10px; border-radius:10px; color: #1f518b; transition:.15s }
.ub-sheet-menu a:hover{ background:#ffffff12 }
.ub-sheet-menu .sep{ border-top:1px solid #ffffff18; margin:6px 0 }

/* עיגון נכון של הדרופדאון לאווטאר (ימין-למטה) */
.userbar{ position:relative; display:flex; align-items:center; gap:8px }
.userbar .ub-sheet{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    left:auto;
    z-index: 999;
}

.new_icons {
    width: 30px;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.38);
    color: white;
    pointer-events: all;
    cursor: pointer;
}

/* כפתור פעמון */
.ub-bell{
    position:relative;
    color: #538bb5;
    display:grid; place-items:center;
    width:fit-content; height:34px; border-radius:999px;
    background: #ffffff; border:1px solid #ffffff12;
    cursor:pointer; transition:.15s;
}
.ub-bell:hover{ background: #538bb5; color: white;
}
.ub-bell-icon{ font-size:16px; line-height:1 }

/* בייג' */
.ub-badge{
    position:absolute; top:-4px; inset-inline-end:-4px;
    min-width:16px; height:16px; padding:0 4px;
    border-radius:999px; font-size:11px; font-weight:700;
    background:linear-gradient(180deg,#ff5a4f,#ff3b2e);
    box-shadow:0 0 12px #ff3b2e66;
    display:flex; align-items:center; justify-content:center;
}

.register_or_login_layout {
    display: block;
    justify-content: center;
    align-items: center;
    padding: 0px;
    min-width: fit-content;
}

.footer_row {
    display: flex;
    flex-direction: column;
    color: white;
    width: 100%;
    height: 450px;
    margin: 0px auto auto auto;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    background: #ecf0f3;
    backdrop-filter: blur(10px);
}

.hero { position:relative; }
.hero-slider{ height:100%; position:relative; }
.hero-slide{
    position:absolute; inset:0;
    opacity:0; pointer-events:none;
    transition:opacity .5s ease;
}
.hero-slide.is-active{ opacity:1; pointer-events:auto; }

.status_index_row {
    width: 100%;
    border-radius: 30px;
    padding: 15px;
    font-size: 15px;
    font-family: Rubik;
    margin: 0px 0;
    border: 3px solid rgba(99, 129, 165, 0.82);
    color: black;
}

.status_row_seperator {
    padding: 0px;
    width: 100%;
    margin-bottom: 30px;
}

.index_user_container {
    display: flex;
    justify-content: right;
    align-items: center;
    border-radius: 30px;
    gap: 10px;
}

.hot_gallery_container {
    display: flex;
    justify-content: space-between;
    padding: 15px;
}

.hot_gallery_container img {
    border-radius: 30px;
    width: 150px;
    height: 100px;
    object-fit: cover;
    margin: 5px;
}

.index_user_container img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 100%;
}

.index_user_container h2 {
    font-size: 18px;
}

.index_user_container p {
    font-size: 13px;
    color: #99aec6;
}

.status_index_row p {
    padding: 0;
}

.fix_userlinks {
    border-radius: 50px !important;
    border: 6px solid #efefef !important;
}

.ani-topbar{
    position: fixed; top:0; left:0; right:0;
    height: 36px;
    background: var(--topbar);
    backdrop-filter: blur(10px);
    display:flex; align-items:center; justify-content:space-between;
    padding: 30px 14px;
    z-index: 10000;
    gap: 10px;
    box-shadow: 0 10px 26px var(--topbar-shadow);
    font-family: system-ui, "Segoe UI", Arial, sans-serif;
}

.ani-topbar-inner {
    display:flex;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    gap: 10px;
    align-items:center;
    justify-content:space-between;
}

.amguserbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: var(--topbar-dashboard);
    border: 1px solid var(--topbar-dashboard-border);
    padding: 3px;
    border-radius: 30px;
}

.ani-topbar__left{ display:flex; align-items:center; gap:10px; min-width:0; margin-right: 20px; }
.ani-topbar__right{ display:flex; align-items:center; gap:8px; }
.ani-topbar__center {
    display: flex;
}


.ani-badge{
    background: var(--brand); color:#fff; font-weight:700;
    font-size:.78rem; padding:4px 8px; border-radius:12px;
}

.ani-ticker{ position:relative; overflow:hidden; height: var(--topbar-h); flex:1;
display: flex; align-items: center; }
.ani-ticker__track{
    display:flex; align-items:center; gap:22px; white-space:nowrap;
    animation: aniMarquee 28s linear infinite;
    will-change: transform;
}
.ani-ticker a{ color:var(--ink); text-decoration:none; opacity:.9; }
.ani-ticker a:hover{ text-decoration:underline; }

/* עצירה בהובר/פוקוס */
.ani-ticker:hover .ani-ticker__track,
.ani-ticker:focus-within .ani-ticker__track{ animation-play-state: paused; }

@keyframes aniMarquee{
    from{ transform: translateX(0) }
    to  { transform: translateX(-50%) }
}

/* כפתורי פעולה קטנים */

.main-content-buttons {
    background: var(--topbarbuttons);
    border:1px solid var(--beg-border) !important;
    font-size:.8rem;
    padding:6px 10px;
    margin: 0 3px;
    border-radius:10px;
    color: var(--normal);
    cursor: pointer;
}

.ani-mini-btn{
    font-size:.8rem; padding:6px 10px; margin: 0 3px; border-radius:10px;
    border:1px solid var(--beg-border); background: var(--top-input-buttons);
    box-shadow: var(--topbarbuttons-shadow); color: var(--normal); cursor: pointer;
}
.ani-mini-btn:hover{ transform: translateY(-1px); }

.ani-mini-btn a, .main-content-buttons a {
    color: var(--normal);
}

/* פס התקדמות גלילה */
.ani-scrollbar{
    position: fixed; top: 60px; left:0; right:0; height:3px;
    background: transparent; z-index: 10000;
}
.ani-scrollbar__fill{
    display:block; height:100%;
    background: linear-gradient(90deg, #ff6e6e, #a52121);
    width:0%;
    box-shadow: 0 0 14px rgba(0,225,255,.35);
}

/* התאמות מובייל */
@media (max-width: 640px){
    .ani-topbar__right{ display:none; }
    .ani-ticker__track{ gap:16px; animation-duration: 22s; }
}

/* נגישות – פחות תנועה */
@media (prefers-reduced-motion: reduce){
    .ani-ticker__track{ animation: none; }
    .ani-scrollbar__fill{ transition: none; }
}

.page-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 15px 40px; /* שיהיה מקום להדר אצלך */
}
.filters-bar {
    background: var(--animes-filters-bg);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
    margin-bottom: 18px;
}
.filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}
.filter-item label {
    font-size: 12px;
    color: var(--primary);
}
.filter-item input,
.filter-item select {
    border: 1px solid var(--anime-shelf-input-border) !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    outline: none !important;
    margin: 0 !important;
    background: var(--anime-shelf-input) !important;
}

.filter-actions {
    margin-right: auto;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.btn-main {
    background: #0f80ff;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 600;
}
.anime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 15px;
}

#anime-results {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 30px;
}

.anime-card {
    background: var(--animes-filters-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.045);
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 48%;
    transition: scale 0.1s ease-in;
}

.anime-card:hover {
    scale: 0.9;
}

.anime-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: var(--animes-filters-bg);
}
.anime-card-body {
    padding: 12px 14px 14px;
    text-align: center;
    background: var(--animes-filters-bg);
}
.anime-card-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--primary);
}
.anime-card-meta {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
#anime-results-empty {
    text-align: center;
    padding: 40px 10px;
    color: var(--primary);
}

.tagtitle {
    font-weight: 500;
    color: var(--primary);
}

.community_base {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
}

.community_sidebar {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.community_title {
    background: var(--community-title);
    color: var(--secondery);
    backdrop-filter: blur(6px);
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--feed-item-shadow);
}

.community_title h2 {
    font-weight: 500;
    font-size: 18px;
    margin: 0;
}

.community_box {
    background: var(--community-box);
    backdrop-filter: blur(8px);
    color: var(--primary);
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    box-shadow: var(--feed-item-shadow);
}

.chat-row {
    font-size: 16px;
    border-bottom: 1px dashed #9c9c9c;
    display: flex;
    justify-content: right;
    gap: 5px;
    align-items: center;
    margin: 10px 0;
    padding-bottom: 10px;
}

.chat-row:nth-child(even) {
    background: var(--community-box-even);
}

.chat-sidebar h2 {
    background: var(--chat-bubble-name);
    color: var(--primary);
    padding: 6px;
    font-size: 16px;
    border-radius: 5px;
    width: fit-content;
    margin: 0;
    font-weight: 500;
}

.mobile_menu_layer {
    display: none;
}

.cart-pill{
    background: white;
    padding: 3px;
}

.yourLevel {
    color: var(--primary);
    font-weight: 500;
    padding: 3px;
    border-radius: 30px;
    margin: 5px 0;
    display: flex;
    align-items: center;
}

.yourLevel a {
    color: var(--primary);
}

.yourLevel:hover,
.yumeco:hover,
.cart-pill:hover {
    background: #538bb5;
    color: white !important;
    cursor: pointer;
}

.yumeco {
    margin-top: 0px;
    font-weight: 500;
    color: var(--primary);
    padding: 3px;
    border-radius: 30px;
}

@media screen and (min-width: 1750px) {
    .ub-sheet {
        margin-right: 20%;
    }
}

@media screen and (max-width: 768px) {

    .mobile_menu_layer {
        display: flex;
        margin-top: -50px;
        width: 100%;
        justify-content: space-around;
    }

    .menu_layer ul, .menu_layer li {
        display: none;
    }

    .burger {
        width: 40px;
        height: 40px;
        background: url('../images/burger.svg'), #5b789c;
        background-size: contain;
        filter: none;
        padding: 20px;
        border-radius: 10px;
    }

    .search {
        margin: 0px;
        width: 40px;
        height: 40px;
        padding: 20px;
        border-radius: 10px;
        background-size: contain !important;
        background: url('../images/search.svg'), #5b789c;
        filter: none;
    }

    .header_container img {
        margin: 0 40px 0 0;
        padding: 0;
        width: 70%;
    }

    .header_container {
        top: 200px;
        flex-direction: row-reverse;
    }

    .menu_layer {
        width: 50%;
    }

    .anm_hero {
        top: 110px;
        border-radius: 0;
    }

    .anm_video {
        border-radius: 0;
    }

    .top_devider_addon {
        flex-direction: column;
    }

    .anm_main_title {
        max-width: 100%;
    }

    .anm_hero_carousel {
        max-width: 100%;
        min-width: 100%;
        max-height: 320px;
        height: 320px;
        border-radius: 0;
    }

    .container {
        margin-top: 250px;
    }

    .anm_main_title {
        height: 300px;
        border-radius: 0;
    }

    .anm_main_title_box h1 {
        font-size: 13px;
    }

    .anm_arrow {
        width: 35px;
        height: 35px;
    }

    .anm_article_inner div:last-child {
        margin-top: 10px;
    }

    .anm_article_inner h3 {
        font-size: 11px;
    }

    .animes_box {
        width: calc((100% - 5px) / 2);
    }

    .animes_box img:hover {
        transform: none;
    }

    .anime_label_name {
        bottom: 10px;
        left: 12px;
        padding: 5px;
        border-radius: 10px;
        z-index: 9;
        font-size: 10px;
    }

    .animes_box img {
        height: 130px;
    }

    .anm_flexarea_u {
        flex-direction: column;
    }

    .upcell {
        width: 100%;
        font-size: 14px;
    }

    .upbreak img {
        width: 30px;
        height: 30px;
    }

    .update_text_h2 {
        font-size: 20px;
    }

    .messanger-corner {
        padding: 0;
        font-size: 12px;
        width: 100%;
        max-width: 100%;
    }

    .ub-bell {
        font-size: 13px;
    }

    .ani-topbar__left {
        padding: 0;
        margin: 0 10px 0 0;
    }

    .sub_login {
        max-width: 100px;
    }

    .community_base {
        flex-direction: column-reverse;
    }

    .community_sidebar {
        width: 100%;
    }

    .feed-container {
        max-width: 90%;
        margin: 0 auto;
    }
}

.profile-save-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(25, 135, 84, 0.96); /* ירוק הצלחה */
    color: #fff;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.profile-save-toast.error {
    background: rgba(200, 60, 60, 0.96);
}

.register_base {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 810px;
}

.register_popup {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 16px;
    z-index: 999999;
    opacity: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: opacity 0.25s ease, transform 0.25s ease;
    direction: rtl;
}

.register_popup.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* שגיאה – אדום */
.register_popup--error {
    background: #ffefef;
    border: 2px solid #ff5a5a;
    color: #7a1111;
}

/* הצלחה – ירוק */
.register_popup--success {
    background: #e9ffe9;
    border: 2px solid #38b638;
    color: #0b4f0b;
}

.tag-input-extender {
    width: 40%;
}

.register_drawing {
    width: 80%;
    background: url(/images/register.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 30px;
    height: 800px;
}

.register_content {
    width: 100%;
    height: inherit;
    padding: 20px;
}

.greetings-window {
    background: rgb(151, 178, 205);
    border-radius: 10px;
    width: 100%;
    padding: 15px;
    color: #094c70;
}

.greetings-window h2, h3 {
    margin: 0;
    padding: 0;
}

.greetings-window h3 {
    font-weight: 400;
}

.row-window {
    background: #eee;
    border-radius: 10px;
    width: 100%;
    padding: 15px;
    color: #094c70;
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    align-items: center;
    gap: 20px;
}

.row-window div:first-child {
    width: 100%;
    background: #d5d5d5;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.row-window div:last-child {
    width: 100%;
}

.row-window h3 {
    font-weight: 500;
}

.row-window input {
    width: 100%;
    font-size: 14px;
}

.register_content button {
    width: 100%;
    border: 0;
    background: #3c709c;
    color: white;
    font-size: 20px;
    padding: 20px;
    border-radius: 10px;
}

.am-register-cta {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    background: #111;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: 0.5s ease;
}

.am-register-cta.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.am-cta-text {
    white-space: nowrap;
}

.am-cta-buttons {
    display: flex;
    gap: 10px;
}

.am-btn {
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.am-btn.normal {
    background: #4fa3ff;
    color: #fff;
}

.am-btn.google {
    background: #fff;
    color: #111;
}

.am-cta-close {
    cursor: pointer;
    margin-left: 10px;
    font-size: 16px;
    opacity: 0.7;
}

.am-cta-close:hover {
    opacity: 1;
}

/* עטיפה כללית של הסטטיסטיקה + המדף שלי */
.anime-shelf-section {
    margin: 32px auto;
    max-width: 1100px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
    padding: 20px 24px;
    background: var(--anime-manga-inner-info);
    border-radius: 20px;
}

/* עמודת הסטטיסטיקה */
.anime-shelf-stats {
    flex: 0 0 220px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--primary);
}

.anime-shelf-stats h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}

.anime-shelf-stats ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* כרטיס המדף */
.anime-shelf-card {
    flex: 1 1 auto;
    background: var(--anime-manga-inner-info-value);
    border-radius: 18px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
    padding: 16px 20px;
    box-sizing: border-box;
}

/* כותרת הקלף */
.anime-shelf-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.anime-shelf-card-header .emoji {
    font-size: 20px;
}

.anime-shelf-card-header .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
}

/* הודעות + כפתור במצבים ללא רשומה */
.anime-shelf-message {
    margin: 8px 0 16px;
    font-size: 14px;
    color: var(--primary);
}

.anime-shelf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    border: none;
    background: #c92f2f;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.anime-shelf-button:hover {
    background: #a42828;
    box-shadow: 0 4px 10px rgba(201, 47, 47, 0.35);
    transform: translateY(-1px);
}

/* שדות המדף */
.anime-shelf-fields {
    display: flex;
    flex-direction: column !important;
    gap: 10px;
}

.anime-shelf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    flex-wrap: wrap;
}

.anime-shelf-row label {
    min-width: 80px;
    text-align: right;
    color: var(--muted);
}

.anime-shelf-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.anime-shelf-anime-title {
    font-weight: 600;
    font-size: 15px;
}

.shelf-top-row {
    justify-content: space-between;
}

/* תג הסטטוס */
.anime-shelf-status-pill {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}

/* אותם צבעים כמו בספרייה */
.anime-shelf-status-pill[data-status="watching"],
.anime-status-tag[data-status="watching"] {
    background: #c82f2f;
    color: #fff;
}
.anime-shelf-status-pill[data-status="completed"],
.anime-status-tag[data-status="completed"] {
    background: #2ea86b;
    color: #fff;
}
.anime-shelf-status-pill[data-status="on_hold"],
.anime-status-tag[data-status="on_hold"] {
    background: #f0ad4e;
    color: #fff;
}
.anime-shelf-status-pill[data-status="dropped"],
.anime-status-tag[data-status="dropped"] {
    background: #d9534f;
    color: #fff;
}
.anime-shelf-status-pill[data-status="plan_to_watch"],
.anime-status-tag[data-status="plan_to_watch"] {
    background: #6c7a89;
    color: #fff;
}

/* קלטים */
.anime-field-input {
    font-size: 14px !important;
    padding: 4px 8px !important;
    border-radius: 7px !important;
    border: 1px solid var(--anime-shelf-input-border) !important;
    outline: none !important;
    color: var(--muted) !important;
    background: var(--anime-shelf-input) !important;
}

.anime-field-input:focus {
    border-color: #2f73c9;
}

/* אינדיקציה לשמירה */
.anime-field-input.saving {
    opacity: 0.6;
}

/* הערה */
.anime-note-input {
    flex: 1 1 auto;
    max-width: 100%;
}

/* קו תחתון לפרקים */
.anime-shelf-total-eps {
    font-size: 12px;
    color: #777;
}

/* מובייל – סטקינג */
@media (max-width: 900px) {
    .anime-shelf-section {
        flex-direction: column;
        gap: 16px;
    }

    .anime-shelf-stats {
        flex: 1 1 auto;
    }
}

.anime-user-status-banner {
    margin: 0px auto;
    width: fit-content;
    padding: 8px 16px;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    border-radius: 10px;
    background: #E6EBF1D3;
}

/* צבעים לפי סטטוס */
.anime-user-status-banner.status-watching {
    background: #e3f0ff;
    color: #225a9c;
}

.anime-user-status-banner.status-completed {
    background: #e2f6eb;
    color: #1f7a4a;
}

.anime-user-status-banner.status-plan {
    background: #f6eefc;
    color: #6b3ea8;
}

.anime-user-status-banner.status-hold {
    background: #fff3cd;
    color: #8a6d1f;
}

.anime-user-status-banner.status-dropped {
    background: #f8d7da;
    color: #842029;
}

.anime-done {
    width: 100%;
    background: var(--main-bg);
    display: flex;
    justify-content: left;
    padding: 5px 0;
}

.new_content img {
    width: 100%;
    display: block;
    max-width: 991px;
    margin: auto auto 10px auto;
}

/* מיקום כללי של אנימוסיקה */
#animusic-root {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 9990;
    font-family: inherit;
}

/* כפתור פתיחה קטן */
.animusic-toggle-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 68px;
    height: 68px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    font-size: 22px;
}

/* חלון הצד */
.animusic-panel {
    position: fixed;
    bottom: 100px;
    right: 16px;
    width: 20%;
    min-width: 320px;
    max-width: 400px;
    max-height: 70vh;
    backdrop-filter: blur(10px);
    background: var(--animusic-player);
    color: var(--primary);
    border-radius: 16px;
    box-shadow: var(--animusic-panel-shadow);
    display: none; /* יפתח ב-JS */
    flex-direction: column;
    overflow: hidden;
}

/* כשרוצים שהוא יהיה פתוח */
.animusic-panel--open {
    display: flex;
}

/* כותרת חלון */
.animusic-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--primary);
    padding: 10px 12px;
    backdrop-filter: blur(10px);
    background: var(--animusic-header-footer);
    border-bottom: 1px solid rgba(148,163,184,0.3);
    cursor: move;
}

.animusic-title {
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.animusic-close-btn {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 16px;
}

/* בר מצבי תצוגה (top/new/playlist) */
.animusic-mode-bar {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    backdrop-filter: blur(10px);
    background: var(--animusic-header-footer);
}

.animusic-mode-btn {
    flex: 1;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    background: var(--animusic-button);
    color: var(--primary);
}

.animusic-mode-btn--active {
    background: #2563eb;
    color: #ffffff;
}

/* רשימת שירים */
.animusic-song-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 8px;
}

.animusic-song-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px dashed var(--line-about);
}

.animusic-song-item:hover {
    background: rgba(222, 227, 234, 0.59);
}

.animusic-song-item:last-child {
    border-bottom: 0;
}

.animusic-song-item-cover img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--anime-cover-bg);
}

.animusic-song-item-titles {
    display: flex;
    flex-direction: column;
}

.animusic-song-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

.animusic-song-item-anime {
    font-size: 11px;
    color: var(--muted);
}

/* הנגן המרחף בתחתית החלון */
.animusic-floating-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--animusic-header-footer);
    border-top: 1px solid rgba(148,163,184,0.3);
    color: var(--primary);
}

.animusic-cover img {
    width: 25px;
    height: 25px;
    border-radius: 10px;
    object-fit: cover;
}

.animusic-meta {
    flex: 1;
    min-width: 0;
}

.animusic-song-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--primary);
}

.animusic-anime-title {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.animusic-controls {
    display: flex;
    gap: 4px;
}

.animusic-control-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    background: var(--animusic-player-button);
    color: var(--primary);
}

.animusic-more-btn {
    border: none;
    background: var(--animusic-player-button);
    color: var(--primary);
    font-size: 11px;
    cursor: pointer;
    border-radius: 10px;
    padding: 5px;
}

.animusic-more-btn a {
    color: var(--primary);
}

/* מיקום נגן יוטיוב – מוסתר */
#animusic-yt-container {
    position: fixed;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
}

.animusic-song-page {
    max-width: 1200px;
    margin: 20px auto 40px;
    padding: 0 12px;
}

.animusic-song-header {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.animusic-song-cover img {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    object-fit: cover;
}

.animusic-song-main-info h1 {
    font-size: 24px;
    margin: 0 0 8px;
}

.animusic-song-anime {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 6px;
}

.animusic-song-meta {
    font-size: 12px;
    color: var(--muted);
}

.animusic-song-player-block {
    margin: 20px 0;
}

.animusic-song-player-wrapper iframe {
    border-radius: 16px;
    overflow: hidden;
}

.animusic-powered-by {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
}

.animusic-song-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.animusic-song-columns h2 {
    font-size: 18px;
    margin-bottom: 8px;
}

.animusic-lyrics-text {
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.6;
}

.animusic-empty {
    font-size: 13px;
    color: #9ca3af;
}

.animusic-song-comments {
    margin: 30px 0 40px;
}

.animusic-signup-prompt {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.animusic-signup-prompt--open {
    display: flex;
}

.animusic-signup-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 22px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 12px 35px rgba(0,0,0,0.5);
}

.animusic-signup-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.animusic-signup-text {
    font-size: 13px;
    margin-bottom: 16px;
}

.animusic-signup-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.animusic-btn-primary,
.animusic-btn-secondary {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
}

.animusic-btn-primary {
    background: #2563eb;
    color: #fff;
}

.animusic-btn-secondary {
    background: var(--primary-button);
    color: var(--primary);
}

.animusic-signup-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
}

.animusic-add-song-page {
    max-width: 1200px;
    margin: 20px auto 40px;
}

#cover_image { display: none; }

.animusic-addsong-title {
    font-size: 24px;
    margin-bottom: 0;
    font-weight: 500;
    color: #0a4b78;
}

.animusic-addsong-sub-title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 300;
    color: #0a4b78;
    text-align: center;
}

.animusic-msg {
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.animusic-msg-success {
    background: #ecfdf5;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.animusic-msg-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.animusic-msg-error ul {
    margin: 0;
    padding-left: 20px;
}

.animusic-addsong-form .form-row {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.animusic-addsong-form label {
    font-size: 14px;
    font-weight: 600;
}

.animusic-addsong-form input[type="text"],
.animusic-addsong-form input[type="url"] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 14px;
}

.animusic-addsong-form .required {
    color: #ef4444;
}

.field-hint {
    font-size: 11px;
    color: #6b7280;
}

.form-actions {
    margin-top: 20px;
}

.animusic-btn-primary {
    background: #3f75a3;
    color: #ffffff;
    border-radius: 10px;
    padding: 8px 18px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
}

.animusic-song-actions {
    margin: 16px 0;
}

.animusic-btn-secondary {
    background: var(--primary-button);
    color: var(--light);
    border-radius: 15px;
    padding: 20px;
    border: none;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    font-family: Rubik;
}

.animusic-btn-secondary:hover {
    background: var(--primary-button-hover);
}

.animusic-playlist-modal {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.animusic-playlist-modal--open {
    display: flex;
}

.animusic-playlist-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    max-width: 380px;
    width: 100%;
    position: relative;
}

.animusic-playlist-box h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.animusic-playlist-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
}

.animusic-playlist-section {
    margin-top: 12px;
}

.animusic-playlist-section-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.animusic-playlist-list {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px;
    font-size: 13px;
}

.animusic-playlist-item {
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.animusic-playlist-item:hover {
    background: #f3f4f6;
}

.animusic-playlist-item-name {
    font-weight: 500;
}

.animusic-playlist-item-meta {
    font-size: 11px;
    color: #6b7280;
}

.animusic-playlist-section input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    margin-bottom: 6px;
}

.animusic-playlist-public-label {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.animusic-playlist-message {
    margin-top: 8px;
    font-size: 12px;
}

.animusic-playlist-select-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 0;
    font-size: 12px;
}

.animusic-playlist-select-row select {
    flex: 1;
    padding: 4px 6px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    font-size: 12px;
}

.menu_animesesons {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: right;
    flex-wrap: wrap;
    gap: 5px;
}

.menu_animesesons img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 10px;
}

.menu_animesesons span {
    font-size: 16px;
}

.menu_animesesons div {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 5px;
}

.home-anime-tabs{
    display:flex;
    gap:10px;
    margin: 0 0 12px 0;
    justify-content:space-between;
    align-items: center;
}

.all-animes a {
    border-radius:999px;
    cursor:pointer;
    background:var(--home-anime-tab);
    border:0;
    padding:8px 14px;
    margin-left: 0px;
    font-size: 14px;
    color: var(--primary);
}

.home-anime-tab{
    border:0;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    background:var(--home-anime-tab);
    font-family: Rubik, Assistant;
    color: var(--primary);
    width: 100%;
}
.home-anime-tab.is-active{
    background:var(--home-anime-tab-hover);
    font-weight:700;
    color: var(--primary);
}

.home-anime-grid{
    opacity: 1;
    transition:
            opacity .6s ease,
            filter .6s ease;
    filter: blur(0px);
}

.home-anime-grid.is-hidden{
    opacity: 0;
    filter: blur(4px);
    pointer-events: none;
}

#homeAnimeSwitch{
    position: relative;
}

#homeAnimeSwitch .anm_flexarea.home-anime-grid{
    position: absolute;
    left: 0;
    right: 0;
    top: 44px; /* אם הטאבים+פס גובה אחר, נשנה */
    width: 100%;
}

#homeAnimeSwitch .home-anime-grid{
    opacity: 1;
    transition: opacity .6s ease, filter .6s ease;
    filter: blur(0px);
}

#homeAnimeSwitch .home-anime-grid.is-hidden{
    opacity: 0;
    filter: blur(4px);
    pointer-events: none;
}

.home-anime-progress{
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,.25);
    border-radius: 999px;
    overflow: hidden;
    margin: 8px auto 0;
}

.home-anime-progress-bar{
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #fff, #b80a0a);
    border-radius: 999px;
    transition: width .1s linear;
}


.animusic-page {
    max-width: 1200px;
    margin: 20px auto;
    direction: rtl;
}

.animusic-header h1 {
    font-size: 28px;
    margin-bottom: 4px;
    color: #0a4b78;
}

.animusic-header p {
    color: #777;
    margin-bottom: 18px;
}

.animusic-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    gap: 15px;
    margin-bottom: 20px;
    background: var(--animes-filters-bg);
    border-radius: 14px;
    padding: 20px;
    width: 100%;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.anime_add_bg {
    background: #eef1f3 !important;
    padding: 30px;
}

.animusic-filter-item {
    display: flex;
    flex-direction: column;
    min-width: 180px;
    flex: 1;
}

.animusic-filter-item label {
    font-size: 12px;
    color: var(--primary);
    margin-bottom: 4px;
}

.animusic-filter-item input,
.animusic-filter-item select {
    border-radius: 999px !important;
    border: 1px solid var(--anime-shelf-input-border) !important;
    padding: 7px 12px !important;
    font-size: 14px !important;
    outline: none !important;
    background:var (--anime-shelf-input) !important;
}

.animusic-filter-item input:focus,
.animusic-filter-item select:focus {
    border-color: #3b82f6;
    background: #ffffff;
}

#animusic-results-wrapper {
    margin-top: 10px;
}

/* רשימת השירים */
.animusic-list {
    background: var(--animusic-row);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.05);
    overflow: hidden;
}

.animusic-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--animusic-line-border);
    gap: 10px;
}

.animusic-row:nth-child(even) {
    background: rgba(165, 188, 214, 0.15);
}

.animusic-row:last-child {
    border-bottom: none;
}

.animusic-cover {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e5e7eb;
}

.animusic-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.animusic-main {
    flex: 1;
    min-width: 0;
}

.animusic-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--primary);
}

.animusic-title a {
    color: var(--primary);
}

.animusic-meta {
    font-size: 12px;
    color: var(--muted);
}

.animusic-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--primary);
}

.animusic-play-btn {
    border-radius: 999px;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    background: var(--primary-button);
    color: var(--light);
    font-size: 12px;
    white-space: nowrap;
}

.animusic-playcount {
    opacity: 0.8;
}

.animusic-results-loading,
.animusic-results-empty {
    text-align: center;
    padding: 30px 0;
    color: #777;
    font-size: 14px;
}

@media (max-width: 768px) {
    .animusic-filters {
        flex-direction: column;
    }
}

.animusic-shuffle-btn {
    opacity: 0.5;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.animusic-shuffle-btn--active {
    background: #2563eb;
    color: #ffffff;
    opacity: 1;
}

.animusic-header img {
    width: 100%;
    border-radius: 10px;
    margin: 0 0 15px 0;
    border: 1px solid #9cb4cc;
}

.animagic-add-layer {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    background: #ffffff;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
    width: 100%;
}

.animagic-row-layer {
    background: #ffffff;
    padding: 30px;
    border-radius: 10px;
    margin: 10px 0;
    width: 100%;
}

.animagic-row-layer input, select {
    border: 1px solid var(--anime-shelf-input-border);
    background: var(--anime-shelf-input);
    border-radius: 10px;
    padding: 15px;
    width: 50%;
}

/* ===== גלריה בסיסית ===== */
.am-gallery-page {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 16px;
}

.am-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.am-gallery-header h1 {
    margin: 0;
    font-size: 1.8rem;
}

.am-gallery-upload-btn {
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    border: 3px solid #dfdfdf;
}

.am-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: 30px;
    background: white;
    border: 3px solid #eee;
    border-radius: 10px;
}

.gallery_filters_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e1e8ef;;
    padding: 30px;
    border-radius: 10px;
    border: 3px solid #c3d0dd;;
    margin: 10px 0;
    max-width: 100%;
    flex-wrap: wrap;
}

.am-gallery-item {
    cursor: pointer;
}

.am-gallery-thumb-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 3 / 4; /* כל התמונות ביחס קבוע */
    background: #111;
}

.am-gallery-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.am-gallery-item:hover .am-gallery-thumb-wrapper img {
    transform: scale(1.03);
}

.am-gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.am-gallery-counters {
    display: flex;
    gap: 6px;
    padding: 6px;
    justify-content: flex-start;
}

.am-gallery-counter {
    background: rgba(0,0,0,0.65);
    color: #fff;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.am-gallery-category-label {
    align-self: flex-start;
    margin: 0 0 6px 6px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.7rem;
}

.am-gallery-loading {
    text-align: center;
    padding: 16px;
    font-size: 0.9rem;
    color: #999;
}

/* ===== מודל צפייה ===== */
.am-gallery-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;

}

.am-gallery-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
}

.am-gallery-modal-inner {
    position: absolute;
    min-width: 60%;
    max-width: 60%;
    max-height: 90vh;
    margin: 40px auto;
    background: rgba(255, 255, 255, 0.76);
    color: #0a2e52;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
}

.am-gallery-modal-close {
    position: absolute;
    top: 6px;
    left: 10px;
    border: none;
    background: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 2;
}

.am-gallery-modal-content {
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow: auto;
    width: 100%;
}

.am-gallery-modal-main-image {
    text-align: center;
}

.am-gallery-modal-main-image img {
    width: 100%;
    max-height: 800px;
    object-fit: contain;
    background: #000;
}

.am-gallery-modal-comments {
    padding: 30px;
    margin: 0 auto;
    width: 80%;
}

.am-gallery-modal-meta {
    padding: 0 0 0 0;
    color: #0a2e52;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}

.am-gallery-modal-loading {
    text-align: center;
    padding: 30px;
    color: #ccc;
}

@media (max-width: 600px) {
    .am-gallery-modal-inner {
        margin: 20px 8px;
        max-height: calc(100vh - 40px);
    }
}

.am-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.am-gallery-filter-btn {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgb(52, 89, 135);
    background: rgb(79, 117, 168);
    color: white;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.57);
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.8;
}

.am-gallery-filter-btn.is-active {
    background: #fff;
    color: #111;
    opacity: 1;
}

.am-gallery-anime-filter {
    margin-bottom: 16px;
    max-width: 400px;
}

.am-gallery-anime-filter label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
    opacity: 0.9;
}

.am-gallery-anime-filter-inner {
    display: flex;
    gap: 6px;
    align-items: center;
}

#amGalleryAnimeFilterInput {
    flex: 1;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    background: white;
    color: inherit;
    font-size: 0.85rem;
}

#amGalleryAnimeFilterClear {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    background: #95b9d6;
    color: white;
    cursor: pointer;
    font-size: 0.8rem;
}

.am-gallery-anime-suggestions {
    position: relative;
    margin-top: 4px;
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    max-height: 200px;
    overflow: auto;
    font-size: 0.85rem;
    z-index: 999;
}

.am-gallery-anime-suggestions div {
    padding: 4px 8px;
    cursor: pointer;
}

.am-gallery-anime-suggestions div:hover {
    background: rgba(255,255,255,0.07);
}

.am-gallery-sort {
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

#amGallerySortSelect {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent;
    color: inherit;
    font-size: 0.85rem;
}

.title-badge {
    --badge-grad1: #48a9ff;
    --badge-grad2: #006fd6;
    --badge-border: #ffffff;
    --badge-border-style: solid;
    --badge-radius: 10px;
    --badge-font: 'Assistant';
    --badge-weight: 600;

    display: inline-block;
    padding: 8px 16px;
    margin: 6px 0;
    border-radius: var(--badge-radius);
    font-family: var(--badge-font), sans-serif;
    font-weight: var(--badge-weight);
    color: #fff;
    background: linear-gradient(135deg, var(--badge-grad1), var(--badge-grad2));
    border: 2px var(--badge-border-style) var(--badge-border);
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: 0.2s;
}


.title-badge:hover {
    transform: translateY(-2px);
    box-shadow:
            0 6px 16px rgba(0,0,0,0.35),
            inset 0 0 8px rgba(255,255,255,0.35);
}

#title-preview-wrapper {
    padding: 12px 0;
}
.title-colors-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.title-color-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}
.title-color-field input[type="color"] {
    width: 50px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.15);
}

.am-title-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    margin: 6px;
    font-size: 14px;
    font-weight: var(--badge-weight, 600);
    font-family: var(--badge-font, 'Heebo'), sans-serif;

    background: linear-gradient(
            135deg,
            var(--badge-grad1, #ff9a9e),
            var(--badge-grad2, #fad0c4)
    );

    border: 2px var(--badge-border-style, solid) var(--badge-border, #ffffff);
    border-radius: var(--badge-radius, 12px);

    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);

    transition: 0.25s ease;
}
.am-title-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.35);
}

.anm_title_flex-it {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

/* שכבת פופאפ גדולה */
.mahomi-birthday-overlay {
    position: fixed;
    inset: 0;
    background: var(--bday-ly-over);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.mahomi-birthday-box {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    padding: 24px 28px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
    text-align: center;
    backdrop-filter: blur(16px);
}

.mahomi-birthday-box img {
    width: 70%;
}

.mahomi-birthday-title {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.mahomi-birthday-text {
    font-size: 1rem;
    margin-bottom: 18px;
}

.mahomi-birthday-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.mahomi-btn-primary,
.mahomi-btn-ghost {
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
}

.mahomi-btn-primary {
    background: var(--bday-ly);
    color: #fff;
    box-shadow: 0 6px 18px rgba(133, 133, 133, 0.6);
}

.mahomi-btn-ghost {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.12);
    color: #444;
}

/* הווידג’ט הקטן בפינה */
.mahomi-birthday-widget {
    position: fixed;
    right: 100px;
    bottom: 20px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    padding: 6px 10px 6px 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.mahomi-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: url('/images/happybday.png') center/cover no-repeat;
}

.mahomi-widget-text {
    font-size: 0.9rem;
    white-space: nowrap;
}

.confetti-particle {
    position: fixed;
    top: -10px;
    width: 12px;
    height: 12px;
    opacity: 0.9;
    border-radius: 2px;
    pointer-events: none;
    z-index: 99999;
    animation: confetti-fall linear forwards;
}

.confetti-color-1 { background: #ff4f81; }
.confetti-color-2 { background: #ffcc00; }
.confetti-color-3 { background: #4fc3f7; }
.confetti-color-4 { background: #4caf50; }
.confetti-color-5 { background: #ba68c8; }


@keyframes confetti-fall {
    0% {
        transform: translateY(-10vh) rotate(0deg);
    }
    100% {
        transform: translateY(110vh) rotate(360deg);
    }
}

/* ===== בסיס כללי ללוח ===== */

.am-calendar-wrapper {
    direction: rtl;
    max-width: 1200px;
    margin: 30px auto;
    padding: 16px 20px 20px;
    border-radius: 18px;
    box-shadow: var(--calendar);
    color: var(--primary);
    font-family: inherit;
    backdrop-filter: blur(6px);
}

/* ===== כותרת (חודש / ניווט) ===== */

.am-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.am-cal-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 0 12px rgba(157, 175, 214, 0.7);
    text-align: center;
    flex: 1;
}

.am-cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 0;
    background: var(--calendar-button);
    color: var(--primary);
    text-decoration: none;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.13s ease;
}

.am-cal-nav:hover {
    transform: translateY(-1px);
    box-shadow: var(--cale-today);
    background: var(--calendar-button);
}

/* ===== מבנה גריד ===== */

.am-calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* שורת ימי השבוע */

.am-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    font-size: 0.8rem;
    text-align: center;
    color: var(--primary);
    opacity: 0.9;
}

.am-cal-weekdays > div {
    padding: 4px 0;
    border-radius: 10px;
    background: var(--top-cale);
    color: var(--light);
}

/* רשת הימים */

.am-cal-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

/* ===== תא יום ===== */

.am-cal-day {
    min-height: 96px;
    padding: 6px 6px 5px;
    border-radius: 12px;
    border: 1px solid rgba(179, 15, 15, 0.27);
    background: var(--cale-day);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* יום ששייך לחודש הנוכחי */
.am-cal-current {
    opacity: 1;
}

/* ימים מחודש קודם/הבא */
.am-cal-other {
    opacity: 0.45;
    background: var(--cal-other);
}

/* אפשרות: אם תוסיף class של היום הנוכחי */
.am-cal-day.am-cal-today {
    border-color: rgb(20, 66, 129);
    box-shadow: var(--cale-today);
}

/* מספר היום */

.am-cal-day-number {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    justify-content: flex-start;  /* RTL: ימין */
    align-items: center;
    gap: 4px;
    color: var(--primary);
}

.am-cal-day-number::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.85);
}

/* ===== אזור האירועים בתוך התא ===== */

.am-cal-events {
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 72px;
    overflow-y: auto;
    padding-inline-end: 2px;
}

/* כשיש הרבה אירועים – scrollbar עדין */
.am-cal-events::-webkit-scrollbar {
    width: 4px;
}
.am-cal-events::-webkit-scrollbar-track {
    background: transparent;
}
.am-cal-events::-webkit-scrollbar-thumb {
    background: rgba(150, 135, 240, 0.75);
    border-radius: 999px;
}

/* ===== תגיות אירועים (badge) ===== */

.am-event-badge {
    display: block;
    width: 100%;
    font-size: 0.72rem;
    line-height: 1.3;
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: default;
    border: 1px solid transparent;
    background: rgba(70, 60, 140, 0.7);
    color: var(--primary);
}

/* אירוע משתמש */
.am-event-user {
    background: var(--event-user);
    border-color: white;
    color: var(--primary);
    cursor: pointer;
}

/* אירוע צוות */
.am-event-staff {
    background: rgba(186, 104, 200, 0.2);
    border-color: rgba(224, 143, 255, 0.85);
    color: #ffe6ff;
    font-weight: 600;
}

/* חג */
.am-event-holiday {
    background: rgba(255, 215, 128, 0.18);
    border-color: rgba(255, 215, 128, 0.9);
    color: #ffecb3;
    font-weight: 600;
}

/* יום הולדת */
.am-event-birthday {
    background: radial-gradient(circle at left,
    rgba(255, 105, 180, 0.45),
    rgba(141, 59, 209, 0.9));
    border-color: rgba(255, 193, 203, 0.95);
    color: #fff7fb;
    font-weight: 600;
}

/* ===== רספונסיביות ===== */

@media (max-width: 768px) {
    .am-calendar-wrapper {
        padding: 12px 10px 14px;
        border-radius: 14px;
    }

    .am-calendar-header {
        margin-bottom: 10px;
    }

    .am-cal-title {
        font-size: 1.05rem;
    }

    .am-cal-day {
        min-height: 82px;
        padding: 4px 4px 4px;
        border-radius: 10px;
    }

    .am-cal-day-number {
        font-size: 0.8rem;
    }

    .am-event-badge {
        font-size: 0.68rem;
        padding: 1px 6px;
    }
}

@media (max-width: 520px) {
    .am-cal-weekdays {
        font-size: 0.72rem;
    }

    .am-cal-days {
        gap: 2px;
    }

    .am-calendar-wrapper {
        margin-inline: 8px;
    }
}

.am-cal-day.am-cal-today {
    border-color: var(--cale-today-border);
    box-shadow: var(--cale-today);
    position: relative;
}

.am-cal-day.am-cal-today::after {
    content: "היום";
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--today-label);
    color: var(--light);
}

.am-calendar-actions {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    margin-top: 30px;
}

.am-cal-add-btn {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.85rem;
    border: 0;
    background: var(--calendar-button);
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.am-cal-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 12px var(--cale-button);
}

.am-cal-form-wrapper {
    margin-bottom: 16px;
    background: var(--calendar-lay);
    border-radius: 14px;
    padding: 10px 12px 12px;
}

.am-cal-form-row {
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.am-cal-form-row label {
    display: block;
    margin-bottom: 4px;
    color: var(--primary);
}

.am-cal-form-row input[type="text"],
.am-cal-form-row input[type="date"],
.am-cal-form-row input[type="time"],
.am-cal-form-row textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 0;
    background: var(--anime-shelf-input);
    color: var(--primary);
    padding: 6px 8px;
    font-size: 0.85rem;
}

.am-cal-form-row textarea {
    resize: vertical;
}

.am-cal-form-row-inline {
    display: flex;
    gap: 10px;
}

.am-cal-form-row-inline > div {
    flex: 1;
}

.am-cal-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.am-cal-form-actions {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 4px;
}

.am-cal-submit,
.am-cal-cancel {
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.8rem;
    border: 1px solid transparent;
    cursor: pointer;
}

.am-cal-submit {
    background: linear-gradient(135deg, #ff77c8, #ffa95f);
    border-color: rgba(255, 180, 190, 0.95);
    color: #190821;
    font-weight: 600;
}

.am-cal-cancel {
    background: transparent;
    border-color: rgba(128, 164, 210, 0.7);
    color: var(--primary);
}

@media (max-width: 600px) {
    .am-cal-form-row-inline {
        flex-direction: column;
    }
}

.am-event-modal-backdrop {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at top, rgba(111, 146, 198, 0.6), rgba(2, 7, 15, 0.9));
    backdrop-filter: blur(6px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.am-event-modal {
    direction: rtl;
    max-width: 50%;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    background: var(--cale-event-window);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
    padding: 18px 18px 16px;
    position: relative;
    color: var(--primary);
}

.am-event-modal-close {
    position: absolute;
    top: 10px;
    left: 12px;
    border: none;
    background: rgba(129, 155, 193, 0.85);
    color: var(--primary);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
}

.am-event-modal-type-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    margin-bottom: 6px;
    border: 1px solid rgba(166, 187, 218, 0.9);
    background: rgba(67, 92, 122, 0.9);
    color: var(--light);
}

.am-event-modal-title {
    font-size: 1.25rem;
    margin: 0 0 8px;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}

.am-event-modal-meta {
    font-size: 0.8rem;
    color: var(--primary);
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.am-event-modal-location::before {
    content: "📍 ";
}
.am-event-modal-datetime::before {
    content: "⏰ ";
}
.am-event-modal-createdby::before {
    content: "🧙‍♂️ ";
}

.am-event-modal-description {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--primary);
    margin-bottom: 12px;
    white-space: pre-wrap;
}

.am-event-modal-extra {
    border-top: 1px solid var(--megamenu-line);
    padding-top: 8px;
    font-size: 0.8rem;
}

@media (max-width: 600px) {
    .am-event-modal {
        max-width: 100%;
        border-radius: 18px;
        padding: 14px 12px 10px;
    }
}

.am-event-rsvp-wrapper {
    margin-bottom: 10px;
    font-size: 0.8rem;
}

.am-event-rsvp-label {
    margin-bottom: 4px;
    color: #e3e0ff;
}

.am-event-rsvp-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.am-event-rsvp-btn {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.78rem;
    border: 1px solid rgba(150, 140, 240, 0.9);
    background: rgba(20, 16, 60, 0.9);
    color: #f8f7ff;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.1s ease, box-shadow 0.12s ease;
}

.am-event-rsvp-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(170, 160, 255, 0.8);
}

/* מצב פעיל */
.am-event-rsvp-btn.is-active {
    background: linear-gradient(135deg, #ff77c8, #ffa95f);
    color: #1a0618;
    border-color: rgba(255, 220, 200, 0.95);
    font-weight: 600;
}

.am-event-rsvp-summary {
    color: #cbc6ff;
    font-size: 0.75rem;
}

.am-event-rsvp-login-hint {
    color: #f2b3c0;
    font-size: 0.75rem;
}

/* עטיפה כללית של הדף */
.am-page-layout.am-animepedia-add {
    max-width: 1200px;
    margin: 40px auto;
    padding: 24px 28px;
    background: var(--article-box);
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    direction: rtl;
    text-align: right;
    box-sizing: border-box;
}

/* כותרת הדף */
.am-animepedia-add h1 {
    font-size: 1.9rem;
    margin: 0 0 18px;
    color: var(--primary);
}

/* שורת טופס */
.am-form-row {
    margin-bottom: 16px;
}

/* תווית */
.am-form-row label {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 6px;
    color: var(--primary);
}

/* אינפוטים כלליים */
.am-form-row input[type="text"],
.am-form-row input[type="file"],
.am-form-row select,
.am-form-row textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--anime-shelf-input-border);
    color: var(--normal);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease, transform 0.08s ease;
}

/* placeholder בהיר */
.am-form-row input::placeholder,
.am-form-row textarea::placeholder {
    color: var(normal);
}

/* פוקוס */
.am-form-row input:focus,
.am-form-row select:focus,
.am-form-row textarea:focus {
    border-color: #ff8ad9;
    box-shadow: 0 0 0 1px rgba(255, 138, 217, 0.4);
    background: var(--anime-shelf-input-border);
}

/* textarea */
.am-form-row textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

/* כפתור שליחה */
.am-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: var(--primary-button);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: transform 0.08s ease, box-shadow 0.18s ease,
    filter 0.18s ease;
}

/* hover / active */
.am-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 11px 24px rgba(0, 0, 0, 0.55);
    filter: brightness(1.05);
}

.am-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
    filter: brightness(0.97);
}

/* מובייל */
@media (max-width: 768px) {
    .am-page-layout.am-animepedia-add {
        margin: 20px 12px;
        padding: 18px 16px;
        border-radius: 16px;
    }

    .am-animepedia-add h1 {
        font-size: 1.5rem;
        margin-bottom: 14px;
    }

    .am-form-row {
        margin-bottom: 14px;
    }

    .am-btn-primary {
        width: 100%;
        justify-content: center;
    }
}

.am-pedia-page, .am-pedia-view {
    direction: rtl;
    text-align: right;
    width: 100%;
    margin-top: 40px;

}

.am-pedia-head { margin: 20px 0 12px; }
.am-pedia-sub { opacity: .75; margin-top: 6px; }

.am-pedia-filters{
    display:flex; gap:10px; flex-wrap:wrap;
    padding: 12px; border-radius: 14px;
    background: var(--top-cale);
}
.am-pedia-filters input, .am-pedia-filters select{
    padding: 10px 12px; border-radius: 12px;
    background: var(--anime-shelf-input-border);
    border: 0; font-size: 13px; margin: 0;
}
.am-pedia-q{ flex: 1; min-width: 220px; }

.am-pedia-grid{
    margin-top: 14px;
    display:grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 12px;
}
.am-pedia-card{
    display:block; text-decoration:none;
    border-radius: 16px; overflow:hidden;
    background: var(--article-box);
    color: var(primary);
    transition: transform .12s ease, filter .12s ease;
}
.am-pedia-card:hover{ transform: translateY(-2px); filter: brightness(1.05); }

.am-pedia-thumb{ height: 130px; background-size: cover; background-position:center; }
.am-pedia-card-body{ padding: 10px 12px; }
.am-pedia-title{ font-weight: 700; color: var(--primary); }
.am-pedia-meta{ color: var(--muted); margin-top: 6px; opacity: .8; font-size: .9rem; display:flex; justify-content: space-between; gap:8px; flex-wrap:wrap; }

.am-pedia-empty{
    margin-top: 14px;
    padding: 14px; border-radius: 14px;
    background: var(--article-box);
    opacity: .85;
}

/* view */
.am-pedia-hero{
    display:flex; gap:16px; flex-wrap:wrap;
    padding: 14px; border-radius: 18px;
background: var(--article-box);
}
.am-pedia-hero-img{
    width: 220px; height: 220px; border-radius: 16px;
    background-size: cover; background-position:center;
    flex: 0 0 auto;
}
.am-pedia-hero-info{ flex:1; min-width: 240px; color: var(--primary) }
.am-pedia-hero-meta{ display:flex; gap:8px; flex-wrap:wrap; margin: 20px 0; }
.am-pill{
    padding: 6px 10px; border-radius: 999px;
    background: var(--line-about);
    font-size: .9rem;
}

.am-pedia-section{ margin-top: 16px; }
.am-pedia-section h2{ margin: 0 0 10px; }

.am-pedia-text{
    padding: 12px; border-radius: 14px;
    background: var(--article-box);
    color: var(--primary);
    line-height: 1.6;
}

/* relations */
.am-pedia-relblock{ margin-top: 12px; }
.am-pedia-reltitle{ font-weight: 700; margin-bottom: 8px; opacity:.9; }
.am-pedia-relgrid{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.am-pedia-relcard{
    display:flex; gap:10px; align-items:center;
    text-decoration:none; color:inherit;
    padding: 10px; border-radius: 14px;
    background: rgba(10,10,25,.55);
    border: 1px solid rgba(255,255,255,.08);
}
.am-pedia-relthumb{
    width: 54px; height: 54px; border-radius: 12px;
    background-size: cover; background-position:center;
}
.am-pedia-reltitle{ font-weight: 700; }
.am-pedia-relmeta{ opacity:.75; font-size:.9rem; margin-top:2px; }

/* ====== Fresh Area – Animagic mock style ====== */

.fresh-area{
    max-width: 1200px;
    margin: 22px auto 40px auto;
    padding: 26px 22px 30px;
    border-radius: 26px;
    background: var(--fresh-area);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0,0,0,.07);
    position: relative;
    overflow: hidden;
}

/* subtle stars layer (optional) */
.fresh-area::before{
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(circle at 20% 15%, rgba(255,255,255,.45), transparent 40%),
            radial-gradient(circle at 75% 30%, rgba(255,255,255,.35), transparent 45%),
            radial-gradient(circle at 60% 70%, rgba(255,255,255,.25), transparent 55%);
    opacity:.55;
    pointer-events:none;
}

.fresh-title{
    position: relative;
    text-align:center;
    font-size: 34px;
    margin: 2px 0 18px;
    letter-spacing: .5px;
    color: #2c4f7a;
    font-weight: 800;
}

/* Tabs */
.fresh-tabs{
    position: relative;
    display:flex;
    justify-content:center;
    gap: 14px;
    margin: 0 auto 18px;
    flex-wrap: wrap;
}

.fresh-tab{
    border: none;
    cursor: default;
    padding: 12px 18px;
    border-radius: 18px 18px 6px 6px;
    background: rgba(255,255,255,.55);
    color: #204362;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
    display:flex;
    align-items:center;
    gap:10px;
}

.fresh-tab .tab-ico{
    font-size: 20px;
    opacity: .85;
}

.fresh-tab.is-active{
    background: rgba(255,255,255,.85);
}

/* Grid */
.fresh-grid{
    position: relative;
    display:flex;
    gap: 18px;
}

.fresh-card{
    background: var(--fresh-card);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 12px 34px rgba(0,0,0,.10);
    overflow: hidden;
    width: 100%;
}

.fresh-card-top{
    display:flex;
    justify-content:center;
    margin-bottom: 10px;
}

.fresh-card-top h2 {
    color: var(--primary);
}

.pedia-meta a {
    color: var(--muted) !important;
}

.content-pedia-list h3 {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
    margin: 10px;
}

.row-pedia {
    background: rgba(10, 46, 82, 0.04);
    padding: 6px;
    border-radius: 10px;
    margin: 5px 0;
}

.row-pedia:nth-child(even) {
    background: rgba(10, 46, 82, 0.07);
}



.content-pedia-list p {
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
    padding-right: 10px;
    margin-bottom: 16px;
}

.fresh-viewall{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:800;
    color: var(--primary);
    text-decoration:none;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--fresh-viewall);
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.fresh-viewall:hover{ filter: brightness(1.02); }
.fresh-viewall .arrow{ font-size: 18px; opacity:.7; }

/* Media blocks */
.media{
    display:block;
    border-radius: 18px;
    overflow:hidden;
    position: relative;
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

.media img{
    width:100%;
    display:block;
    object-fit: cover;
}

.media-hero{
    height: 210px;
}

.media-hero img{
    height: 100%;
}

.likes{
    position:absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,.35);
    color:#fff;
    font-weight:800;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 14px;
    backdrop-filter: blur(6px);
}

.fresh-card-title{
    margin: 12px 4px 8px;
    text-align:center;
    font-size: 26px;
    font-weight: 900;
    color:#274c72;
}

/* mini row */
.fresh-mini{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.media-mini{
    height: 134px;
}

.media-mini img{
    height: 100%;
}

.mini-titles{
    grid-column: 1 / -1;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: -2px;
}

.mini-title{
    text-align:center;
    color:#2f587f;
    font-weight: 800;
    font-size: 15px;
    opacity: .9;
}

/* small tag pill */
.tag-pill{
    display:inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(53, 117, 175, .18);
    color:#2b5b86;
    font-weight: 900;
    font-size: 12px;
    margin-left: 6px;
}

/* song mini text */
.song-name{ font-weight: 900; }
.song-artist{ font-weight: 700; opacity: .75; font-size: 13px; margin-top: 2px; }

.song-ico{
    position:absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(255,255,255,.75);
    border-radius: 999px;
    padding: 6px 8px;
    font-size: 14px;
}

/* bottom button */
.fresh-card-bottom{
    margin-top: 12px;
    display:flex;
    justify-content:center;
}

/* responsive */
@media (max-width: 1100px){
    .fresh-grid{ grid-template-columns: 1fr; }
    .media-hero{ height: 240px; }
}

.apedia-flex {
    display: flex;
}

.am-pedia-text h1 {
    margin: 0;
    padding: 0;
}

.content-pedia-list {
    padding: 15px;
    color: var(--primary);
    font-weight: 600;
}

.content-pedia-list a {
    color: var(--primary);
    font-weight: 600;
}

.content-pages-index-container {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-direction: column;
    text-align: center;
}

.content-pages-index-container img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

.content-pages-index-container h2 {
    font-weight: 700;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

.content-add-space {
    margin-top: 30px;
}

.add_divider {
    margin-top: 40px;
    margin-bottom: 40px;
    border-bottom: 3px solid var(--line-primary);
}

.title-row {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    text-align: right;
    color: white;
    background: var(--article-box);
    margin: 15px 0;
    font-weight: 600;
}