:root{
  --page:#050505;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--page)}
body{
  min-height:100vh;
  overflow:auto;
  font-family:"Segoe UI",Arial,sans-serif;
}
.stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#050505;
}
.canvas{
  position:relative;
  width:min(100%,1600px);
  aspect-ratio:1600/1024;
  background:#050505;
  overflow:hidden;
}
.reference{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
}
/* Only the two upper section names are replaced with live text.  The masks
   are confined to the original title strips, leaving the library artwork and
   all navigation, cards, and controls untouched. */
.home-live-section-titles{position:absolute;inset:0;z-index:3;pointer-events:none}
.home-live-section-title{position:absolute;top:12.85%;display:block;padding:.18% .35% .25%;background:linear-gradient(90deg,rgba(4,5,4,.98) 0%,rgba(4,5,4,.93) 76%,rgba(4,5,4,0) 100%);color:#f0cf72;font:700 clamp(13px,1.65vw,28px)/1.1 Georgia,"Times New Roman",serif;letter-spacing:.015em;text-shadow:0 1px 0 #0a0702,0 0 10px rgba(225,179,73,.14);white-space:nowrap}
.home-live-section-title--intelligence{left:20.12%;width:20.2%}
.home-live-section-title--global{left:74.72%;width:16.1%}
.main-approved-crest,
.main-approved-founder{
  position:absolute;
  display:block;
  pointer-events:none;
}
.main-approved-crest{
  z-index:3;
  left:9.84%;
  top:11.70%;
  width:8%;
  aspect-ratio:1;
  object-fit:contain;
}
.main-approved-crest-artifact-mask{
  position:absolute;
  z-index:4;
  left:16.80%;
  top:22.70%;
  width:.30%;
  height:.40%;
  background:#050507;
  pointer-events:none;
}
.main-approved-founder{
  z-index:3;
  right:8.4%;
  top:1.95%;
  width:3.85%;
  aspect-ratio:1;
  object-fit:cover;
  object-position:50% 31%;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(227,190,103,.86);
}
.hotspot {
  position: absolute;
  z-index: 10;
  display: block;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
}

/* ЛЕВОЕ МЕНЮ */
.nav {
    left: 3.9%;
    width: 9.6%;
    height: 2.5%;
}

.nav.home { top: 33.33%; height: 3.78%; }
.nav.academy   { top: 43.2%; }
.nav.business  { top: 47.9%; }
.nav.council   { top: 52.6%; }
.nav.analytics { top: 57.3%; }
.nav.projects  { top: 62.0%; }
.nav.library   { top: 66.7%; }
.nav.islamic   { top: 71.4%; }
.nav.music     { top: 76.1%; }
.nav.settings  { top: 80.8%; }

/* БЫСТРЫЕ КНОПКИ В ЦЕНТРЕ */
.quick {
  top: 70.9%;
  height: 6.6%;
}

.q-academy {
  left: 18.2%;
  width: 15.6%;
}

.q-business {
  left: 35.2%;
  width: 15.4%;
}

.q-council {
  left: 52.0%;
  width: 15.3%;
}

.q-analytics {
  left: 68.8%;
  width: 16.3%;
}

/* Подсветка при наведении */
.hotspot:hover {
  background: rgba(240, 186, 44, 0.08);
}

.hotspot:focus-visible {
  outline: 2px solid #f0ba2c;
}

/* Масштабирование */
@media (max-aspect-ratio: 1600/1024) {
  .canvas {
    width: 100%;
    height: auto;
  }
}
/* ===== IRFAN AI — FINAL HOTSPOTS 31.08.2026 ===== */

.hotspot,
.hotspot:hover,
.hotspot:focus,
.hotspot:active {
    position: absolute;
    display: block;
    z-index: 9999;
    pointer-events: auto;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.hotspot.nav {
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 99999 !important;
    opacity: 1 !important;
}

/* IRFAN INTELLIGENCE / GLOBAL: transparent source-image bounds projected into 1600×1024 canvas.
   Source: 1448×1086, object-fit: contain (scale 1024 / 1086; horizontal inset 117.333 px). */
.intelligence-deep { left:22.714549%; top:31.123389%; width:9.193370%; height:1.012891%; }
.intelligence-insights { left:22.714549%; top:33.977901%; width:8.957643%; height:1.012891%; }
.intelligence-conclusions { left:22.714549%; top:37.108656%; width:12.552486%; height:0.736648%; }
.intelligence-entry { left:22.243094%; top:39.871087%; width:15.322284%; height:4.143646%; }
.intelligence-request { left:22.243094%; top:49.815838%; width:3.476980%; height:5.064457%; }
.intelligence-analysis { left:26.191529%; top:49.815838%; width:3.359116%; height:5.064457%; }
.intelligence-report { left:30.081031%; top:49.815838%; width:3.359116%; height:5.064457%; }
.intelligence-idea { left:34.029466%; top:49.815838%; width:3.476980%; height:5.064457%; }
.global-media-business { left:77.697974%; top:21.639042%; width:7.189687%; height:1.104972%; }
.global-education { left:78.169429%; top:25.046041%; width:6.069982%; height:1.197053%; }
.global-ideas { left:74.751381%; top:28.821363%; width:12.847145%; height:0.828729%; }
.global-entry { left:73.690608%; top:32.136280%; width:14.968692%; height:4.143646%; }
.global-task { left:73.749540%; top:48.250460%; width:3.241252%; height:5.156538%; }
.global-file { left:77.521179%; top:48.250460%; width:3.300184%; height:5.156538%; }
.global-note { left:81.351750%; top:48.250460%; width:3.300184%; height:5.156538%; }
.global-calendar { left:85.123389%; top:48.250460%; width:3.535912%; height:5.156538%; }

/* These click zones are above the legacy navigation layer, without adding visual layers. */
.intelligence-entry,
.intelligence-deep,
.intelligence-insights,
.intelligence-conclusions,
.intelligence-request,
.intelligence-analysis,
.intelligence-report,
.intelligence-idea,
.global-media-business,
.global-education,
.global-ideas,
.global-entry,
.global-task,
.global-file,
.global-note,
.global-calendar { z-index: 100000 !important; }

/* Keep the approved left navigation above central transparent hotspots at
   narrow viewports; its geometry and visual assets stay unchanged. */
.hotspot.nav { z-index: 100001 !important; }

/* ЛЕВОЕ МЕНЮ */
.nav {
    left: calc(0.97% + 2cm);
    width: 13.26%;
    height: 3.41%;
}

.nav.home { top: 33.73%; height: 3.70%; }

.nav.academy { top: 38.60%; }
.nav.business { top: 43.04%; }
.nav.council { top: 47.28%; }
.nav.analytics { top: 51.72%; }

.nav.projects { top: 56.17%; }
.nav.library  { top: 60.34%; }
.nav.islamic  { top: 64.55%; }
.nav.music    { top: 68.72%; }
.nav.settings { top: 73.09%; }

/* Отдельный рабочий вход в Control Center: показывается шаблоном только OWNER/ADMIN. */
.owner-control-entry {
    position: absolute;
    z-index: 100001;
    top: 28.9%;
    left: calc(0.97% + 2cm);
    display: grid;
    gap: 2px;
    width: 13.26%;
    padding: .38% .52%;
    border: 1px solid rgba(230, 192, 92, .72);
    border-radius: 5px;
    color: #f2d783;
    background: rgba(18, 15, 9, .88);
    box-shadow: inset 0 1px 0 rgba(255, 235, 162, .12), 0 5px 14px rgba(0, 0, 0, .32);
    font: 700 clamp(.43rem, .69vw, .72rem)/1.14 Georgia, "Times New Roman", serif;
    letter-spacing: .025em;
    text-decoration: none;
}

.owner-control-entry small {
    color: rgba(230, 212, 166, .9);
    font: 600 clamp(.34rem, .5vw, .54rem)/1 "Segoe UI", Arial, sans-serif;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.owner-control-entry:hover,
.owner-control-entry:focus-visible {
    border-color: #f5d77f;
    background: rgba(73, 55, 19, .94);
    outline: none;
}

/* 5 НИЖНИХ КАРТОЧЕК — ФИНАЛЬНАЯ ГЕОМЕТРИЯ,
   скорректированная по фактическому отображению в браузере */
.quick {
    top: 69.800%;
    height: 17.700%;
}

.q-academy {
    left: 20.977%;
    width: 13.885%;
}

.q-business {
    left: 35.583%;
    width: 12.503%;
    transform: translateX(-0.2cm);
}

.q-council {
    left: 48.703%;
    width: 12.022%;
    transform: translateX(-0.9cm);
}

.q-analytics {
    left: 61.258%;
    width: 12.744%;
    transform: translateX(-1.7cm);
}

.q-projects {
    left: 74.327%;
    width: 15.929%;
    transform: translateY(2.85cm);
}

/* Живые статусы: собственная семантическая полоса в очищенных карточках фона. */
.metrics-panel {
    position: absolute;
    z-index: 2;
    top: 60.15%;
    left: 20.55%;
    /* Слой подписей совпадает с координатами уже утверждённого фона.
       Дополнительный сдвиг создавал ложное наложение карточек вправо. */
    transform: none;
    width: 70.55%;
    height: 8.15%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4%;
    pointer-events: auto;
}

.metric-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18em;
    min-width: 0;
    padding: .38em .35em .32em;
    color: #d8c79b;
    text-align: center;
    text-decoration: none;
}

.metric-value {
    display: block;
    min-height: 1em;
    margin: 0;
    color: #e8c768;
    font: 700 clamp(1rem, 2.05vw, 2rem)/1 Georgia, "Times New Roman", serif;
    text-shadow: 0 0 10px rgba(223, 178, 62, .12);
}

.metric-label {
    display: block;
    color: #dfc77b;
    font: 600 clamp(.48rem, .79vw, .8rem)/1.1 Georgia, "Times New Roman", serif;
    letter-spacing: .025em;
    white-space: nowrap;
}

.metric-status {
    display: block;
    min-height: 1.1em;
    color: rgba(220, 207, 170, .82);
    font: 500 clamp(.39rem, .60vw, .62rem)/1.1 "Segoe UI", Arial, sans-serif;
    white-space: nowrap;
}

.metric-card.is-updating .metric-value {
    animation: irfan-metric-pulse .7s ease-out;
}

@keyframes irfan-metric-pulse {
    0% { text-shadow: 0 0 0 rgba(233, 193, 78, 0); }
    45% { text-shadow: 0 0 13px rgba(233, 193, 78, .42); }
    100% { text-shadow: 0 0 10px rgba(223, 178, 62, .12); }
}
/* === MAIN SCREEN GLOW — 03.09.2026 === */
#irfanCanvas {
    position: relative !important;
}

/* 1. ВНЕШНЯЯ ПОДСВЕТКА:
   верх чуть ниже,
   боковые линии идут вниз,
   нижнюю линию не рисуем */
#irfanCanvas {
    position: relative !important;
}

/* === LIVE CLOCK + WEATHER === */

.live-clock {
    position: absolute;
 left: calc(59.0% - 1.4cm);
top: 1.9%;
    transform: translateX(-50%);
    z-index: 9000;
    pointer-events: none;

    min-width: 90px;
    text-align: center;
    padding: 2px 8px;

    background: rgba(5,5,5,.96);
    color: #e4ca7b;
    font-family: Georgia, serif;
    
    font-size: 26px;
    font-weight: 700;
}
.live-weather {
    position: absolute;
    left: 6.2%;
    top: 82%;
    z-index: 9000;
    pointer-events: none;

    width: 155px;
    min-height: 72px;
    padding: 5px;

    background: rgba(5,5,5,.96);
    color: #eee3c3;
    text-align: center;
    font-size: 16px;
}

#weatherIcon {
    color: #e8b641;
    font-size: 27px;
    margin-right: 5px;
}

#weatherTemp {
    font-size: 20px;
}

.weatherCity {
    display: block;
    margin-top: 3px;
    font-size: 14px;
}
/* =================================================
   IRFAN AI — SYSTEM HAMBURGER MENU
   FINAL PREMIUM ACTIVE BUTTON — STAGE 1.2
   Одна рамка. Вся рамка кликабельна.
   Тёмно-золотое внутреннее свечение постоянно,
   светлее при наведении и ярче при нажатии.
   ================================================= */

.irfan-menu-btn {
    position: absolute;

    /* Финальное положение рамки, рассчитанное из Stage 1.1:
       +0.25 см вправо и -0.1 см вверх. */
    left: calc(7.71% + 0.25cm);
    top: calc(1.58% - 0.1cm);
    width: 2.184%;
    height: 4.16%;

    z-index: 15000;
    box-sizing: border-box;
    cursor: pointer;

    border: 1px solid rgba(224, 184, 76, .90);
    border-radius: 6px;
    outline: none;

    /* Постоянное тёмно-золотое внутреннее свечение. */
    background:
        radial-gradient(
            ellipse at center,
            rgba(172, 116, 30, .24) 0%,
            rgba(112, 72, 18, .16) 52%,
            rgba(45, 29, 8, .07) 78%,
            rgba(5, 5, 5, .02) 100%
        );

    box-shadow:
        inset 0 0 14px rgba(194, 136, 39, .23),
        inset 0 0 5px rgba(232, 184, 76, .11),
        inset 0 -1px 0 rgba(255, 222, 126, .16),
        0 2px 6px rgba(0, 0, 0, .50),
        0 0 7px rgba(185, 128, 32, .13);

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

/* Старые псевдо-рамки отключены: теперь сама кнопка является рамкой. */
.irfan-menu-btn::before,
.irfan-menu-btn::after {
    content: none !important;
    display: none !important;
}

.irfan-menu-btn:hover,
.irfan-menu-btn:focus-visible {
    border-color: rgba(246, 209, 112, .99);
    background:
        radial-gradient(
            ellipse at center,
            rgba(220, 164, 61, .32) 0%,
            rgba(150, 98, 25, .21) 55%,
            rgba(56, 35, 9, .09) 82%,
            rgba(6, 6, 6, .02) 100%
        );

    box-shadow:
        inset 0 0 16px rgba(231, 174, 65, .30),
        inset 0 0 6px rgba(255, 220, 126, .14),
        0 2px 7px rgba(0, 0, 0, .52),
        0 0 11px rgba(222, 170, 55, .25);

    filter: brightness(1.06);
}

.irfan-menu-btn:active {
    border-color: rgba(255, 224, 132, 1);
    background:
        radial-gradient(
            ellipse at center,
            rgba(247, 199, 94, .40) 0%,
            rgba(183, 123, 32, .27) 58%,
            rgba(65, 39, 10, .10) 84%,
            rgba(6, 6, 6, .02) 100%
        );

    box-shadow:
        inset 0 0 18px rgba(247, 197, 91, .36),
        inset 0 1px 5px rgba(0, 0, 0, .20),
        0 1px 5px rgba(0, 0, 0, .58),
        0 0 12px rgba(230, 179, 64, .30);

    filter: brightness(1.10);
}

/* Открытое меню: кнопка остаётся явно активной. */
.canvas:has(.irfan-system-menu.open) .irfan-menu-btn {
    border-color: rgba(250, 215, 119, 1);
    background:
        radial-gradient(
            ellipse at center,
            rgba(231, 176, 67, .34) 0%,
            rgba(157, 104, 26, .23) 58%,
            rgba(58, 36, 9, .09) 84%,
            rgba(6, 6, 6, .02) 100%
        );

    box-shadow:
        inset 0 0 17px rgba(236, 181, 70, .31),
        0 2px 7px rgba(0, 0, 0, .54),
        0 0 12px rgba(228, 179, 54, .28);
}

/* выезжающее системное меню */
.irfan-system-menu {
    position: absolute;
    left: 5.2%;
    top: 9%;

    width: 260px;

    padding: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(12,10,7,.98),
            rgba(3,3,3,.98)
        );

    border: 1px solid rgba(218,178,73,.65);
    border-radius: 5px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.65),
        inset 0 0 20px rgba(180,120,25,.05);

    z-index: 14999;

    display: none;
}

.irfan-system-menu.open {
    display: block;
}

.system-menu-title {
    color: #d9bc69;
    font-family: Georgia, serif;
    font-size: 18px;
    text-align: center;

    padding: 7px 4px 12px;

    border-bottom:
        1px solid rgba(211,174,70,.35);
}

.system-menu-item {
    width: 100%;
    margin-top: 9px;
    padding: 10px 12px;

    color: #eadcae;
    background: rgba(255,255,255,.025);

    border:
        1px solid rgba(205,166,62,.25);
    border-radius: 4px;

    font-size: 15px;
    text-align: left;

    cursor: pointer;
}

.system-menu-item:hover {
    background: rgba(194,145,35,.12);
}

.language-list {
    display: none;
    padding-top: 7px;
}

.language-list.open {
    display: block;
}

.language-list button {
    display: block;

    width: 100%;
    padding: 9px 11px;
    margin: 3px 0;

    color: #f0e6c5;
    background: transparent;

    border: 0;
    border-left:
        2px solid transparent;

    text-align: left;
    font-size: 14px;

    cursor: pointer;
}

.language-list button:hover,
.language-list button.active {
    color: #f0ce70;
    background: rgba(211,164,50,.10);

    border-left-color: #d5ae4d;
}.irfan-system-menu {
    max-height: 78%;
    overflow-y: auto;
    scrollbar-width: thin;
}

.irfan-system-menu::-webkit-scrollbar {
    width: 5px;
}

.irfan-system-menu::-webkit-scrollbar-thumb {
    background: rgba(210,170,65,.45);
    border-radius: 5px;
}

.system-menu-exit {
    margin-top: 12px;
    color: #d8b85f;
    border-top: 1px solid rgba(211,174,70,.35);
}
/* =================================================
   IRFAN AI — HELP / ABOUT PANEL
   ================================================= */

.irfan-help-panel[hidden] {
    display: none !important;
}

.irfan-help-panel {
    position: absolute;
    left: 18%;
    top: 8%;
    width: 64%;
    max-height: 78%;

    z-index: 20000;

    overflow-y: auto;

    background: rgba(3, 3, 3, .96);
    border: 1px solid rgba(218, 178, 73, .72);
    border-radius: 6px;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, .82),
        inset 0 0 35px rgba(180, 120, 25, .05);

    color: #eee4c2;
}

.irfan-help-card {
    position: relative;
    padding: 28px 32px 24px;
}

.irfan-help-card h2 {
    margin: 0 45px 20px 0;

    color: #e1bf63;
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 700;
}

.irfan-help-card h3 {
    margin: 22px 0 9px;

    color: #d5b65f;
    font-family: Georgia, serif;
    font-size: 18px;
}

.irfan-help-card p {
    margin: 9px 0;

    color: #e9e2cf;
    font-size: 15px;
    line-height: 1.65;
}

.help-close-btn {
    position: absolute;
    right: 16px;
    top: 12px;

    width: 35px;
    height: 35px;

    border: 1px solid rgba(218, 178, 73, .45);
    border-radius: 4px;

    background: rgba(255,255,255,.025);
    color: #e2c269;

    font-size: 24px;
    cursor: pointer;
}

.help-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;

    margin-top: 25px;
}

.help-actions button {
    padding: 11px 8px;

    background: rgba(211, 164, 50, .07);
    color: #ead38b;

    border: 1px solid rgba(213, 174, 77, .42);
    border-radius: 4px;

    font-size: 14px;
    cursor: pointer;
}

.help-actions button:hover {
    background: rgba(211, 164, 50, .16);
    border-color: rgba(232, 196, 98, .75);
}

.help-motto {
    margin-top: 24px;
    padding-top: 17px;

    border-top: 1px solid rgba(211, 174, 70, .30);

    color: #d7bd73;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 16px;
}
/* =================================================
   IRFAN AI — SUPPORT / IRFAN FUND PANEL
   ================================================= */

.irfan-support-panel[hidden] {
    display: none !important;
}

.irfan-support-panel {
    position: absolute;
    left: 12%;
    top: 6%;
    width: 76%;
    max-height: 86%;

    z-index: 21000;
    overflow-y: auto;

    background: rgba(3, 3, 3, .97);
    border: 1px solid rgba(218, 178, 73, .72);
    border-radius: 6px;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, .82),
        inset 0 0 35px rgba(180, 120, 25, .05);

    color: #eee4c2;
}

.irfan-support-card {
    position: relative;
    padding: 28px 30px 30px;
}

.irfan-support-card h2 {
    margin: 0 50px 8px 0;

    color: #e1bf63;
    font-family: Georgia, serif;
    font-size: 28px;
    text-align: center;
}

.support-intro {
    margin: 0 0 24px;

    color: #d8cfb7;
    text-align: center;
    font-size: 14px;
}

.support-close-btn {
    position: absolute;
    right: 16px;
    top: 12px;

    width: 35px;
    height: 35px;

    border: 1px solid rgba(218, 178, 73, .45);
    border-radius: 4px;

    background: rgba(255,255,255,.025);
    color: #e2c269;

    font-size: 24px;
    cursor: pointer;
}

.support-direction {
    margin-top: 18px;
    padding: 16px;

    border: 1px solid rgba(213, 174, 77, .30);
    border-radius: 5px;

    background: rgba(255, 255, 255, .018);
}

.support-direction h3 {
    margin: 0 0 13px;

    color: #dfbe62;
    font-family: Georgia, serif;
    font-size: 20px;
    text-align: center;
}

.support-submenu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.support-submenu button {
    min-height: 42px;
    padding: 9px 10px;

    background: rgba(211, 164, 50, .055);
    color: #e8ddba;

    border: 1px solid rgba(213, 174, 77, .28);
    border-radius: 4px;

    font-size: 13px;
    cursor: default;
}

.support-submenu button:hover {
    background: rgba(211, 164, 50, .10);
    color: #efd17a;
}

.irfan-support-panel::-webkit-scrollbar {
    width: 6px;
}

.irfan-support-panel::-webkit-scrollbar-thumb {
    background: rgba(210, 170, 65, .45);
    border-radius: 6px;
}

/* =========================================================
   IRFAN AI — MENU STAGE 2 / FULL STRUCTURE
   Добавляет структуру разделов и подразделов внутри Меню.
   Кнопка Меню Stage 1.2 не изменяется.
   ========================================================= */

.irfan-system-menu {
    width: min(390px, 31vw);
    max-height: 84%;
    padding: 12px 12px 14px;
    scrollbar-gutter: stable;
}

.irfan-menu-v2 {
    margin-top: 8px;
    color: #eee4c2;
    font-family: "Segoe UI", Arial, sans-serif;
}

.irfan-menu-v2 * { box-sizing: border-box; }

.irfan-menu-profile {
    padding: 12px;
    margin: 2px 0 10px;
    border: 1px solid rgba(218,178,73,.34);
    border-radius: 7px;
    background:
        radial-gradient(circle at 15% 0%, rgba(210,159,48,.10), transparent 38%),
        rgba(255,255,255,.018);
    box-shadow: inset 0 0 18px rgba(168,112,26,.04);
}

.irfan-profile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.irfan-profile-title {
    color: #edcf78;
    font-family: Georgia, serif;
    font-size: 16px;
    font-weight: 700;
}

.irfan-role-badge {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid rgba(223,181,72,.42);
    border-radius: 999px;
    color: #d9bd72;
    background: rgba(173,119,29,.08);
    font-size: 10px;
    letter-spacing: .7px;
}

.irfan-online-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 9px;
}

.irfan-online-chip {
    padding: 7px 8px;
    border: 1px solid rgba(207,170,72,.22);
    border-radius: 5px;
    background: rgba(0,0,0,.18);
    color: #cfc5a8;
    font-size: 11px;
}

.irfan-online-chip strong {
    display: block;
    margin-top: 2px;
    color: #ead590;
    font-size: 13px;
    font-weight: 600;
}

.irfan-menu-search {
    width: 100%;
    margin: 0 0 9px;
    padding: 9px 10px;
    border: 1px solid rgba(213,174,77,.28);
    border-radius: 6px;
    background: rgba(0,0,0,.30);
    color: #f0e7cf;
    outline: none;
    font-size: 12px;
}

.irfan-menu-search::placeholder { color: #8f876f; }
.irfan-menu-search:focus {
    border-color: rgba(235,196,95,.62);
    box-shadow: 0 0 8px rgba(216,163,48,.09);
}

.irfan-menu-group-label {
    margin: 11px 3px 5px;
    color: #977f45;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.45px;
    text-transform: uppercase;
}

.irfan-menu-section {
    margin: 5px 0;
    border: 1px solid rgba(205,166,62,.22);
    border-radius: 6px;
    background: rgba(255,255,255,.014);
    overflow: hidden;
}

.irfan-menu-section[hidden] { display: none !important; }

.irfan-status-item {
    display: block;
    cursor: default;
    opacity: .68;
}

.irfan-menu-section > summary {
    list-style: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 31px 9px 10px;
    color: #e4d4a7;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    font-weight: 600;
}

.irfan-menu-section > summary::-webkit-details-marker { display:none; }

.irfan-menu-section > summary::after {
    content: "›";
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    color: #b79443;
    font-size: 18px;
    transition: transform .16s ease, color .16s ease;
}

.irfan-menu-section[open] > summary::after {
    transform: translateY(-50%) rotate(90deg);
    color: #e1bf63;
}

.irfan-menu-section > summary:hover,
.irfan-menu-section[open] > summary {
    color: #f0d98d;
    background: rgba(201,148,37,.075);
}

.irfan-menu-icon {
    width: 18px;
    text-align: center;
    color: #d7ae4c;
    font-size: 13px;
}

.irfan-notification-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    margin-right: 24px;
    padding: 0 6px;
    border: 1px solid rgba(244,211,126,.78);
    border-radius: 999px;
    background: #6f351f;
    color: #fff5d5;
    font: 700 10px/1 Arial,sans-serif;
    letter-spacing: 0;
    box-shadow: 0 0 0 3px rgba(129,63,32,.14);
}

.irfan-menu-items {
    padding: 2px 8px 8px 34px;
    border-top: 1px solid rgba(202,162,62,.12);
}

.irfan-subitem {
    display: block;
    width: 100%;
    padding: 7px 7px;
    margin: 2px 0;
    border: 0;
    border-left: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #cfc5a9;
    text-align: left;
    font: inherit;
    font-size: 11px;
    line-height: 1.25;
    cursor: pointer;
}

.irfan-subitem:hover,
.irfan-subitem.is-selected {
    color: #efd784;
    background: rgba(207,155,42,.075);
    border-left-color: rgba(226,184,76,.62);
}

.irfan-subitem.irfan-guide {
    margin-top: 6px;
    padding-top: 8px;
    color: #d7b85f;
    border-top: 1px solid rgba(210,170,65,.16);
}

.irfan-subitem.irfan-guide::before { content: "?  "; color:#efd177; }

.irfan-menu-status {
    position: sticky;
    bottom: -1px;
    z-index: 3;
    margin-top: 10px;
    padding: 8px 9px;
    border: 1px solid rgba(210,170,65,.22);
    border-radius: 5px;
    background: rgba(5,5,5,.96);
    color: #9f967e;
    font-size: 10px;
    line-height: 1.35;
}

.irfan-menu-status strong { color:#d9bd6d; font-weight:600; }

.irfan-guide-panel {
    display: none;
    margin: 8px 0 0;
    padding: 10px;
    border: 1px solid rgba(220,180,75,.32);
    border-radius: 6px;
    background: rgba(12,9,4,.96);
    color: #d7cfb9;
    font-size: 11px;
    line-height: 1.5;
}
.irfan-guide-panel.open { display:block; }
.irfan-guide-panel h4 {
    margin:0 0 5px;
    color:#e2c46d;
    font-family:Georgia,serif;
    font-size:13px;
}
.irfan-guide-panel button {
    margin-top:7px;
    padding:5px 8px;
    border:1px solid rgba(212,173,73,.30);
    border-radius:4px;
    background:rgba(255,255,255,.02);
    color:#d8bf76;
    cursor:pointer;
}

.irfan-owner-section {
    border-color: rgba(230,186,74,.42);
    box-shadow: inset 0 0 14px rgba(182,125,28,.035);
}
.irfan-owner-section > summary { color:#e7c66c; }

.irfan-menu-legacy-divider {
    margin: 12px 0 4px;
    border-top: 1px solid rgba(211,174,70,.20);
}

/* Arabic follows the shared platform direction without mirroring the fixed visual canvas. */
html[dir="rtl"] #irfanCanvas { direction:ltr; }
html[dir="rtl"] .irfan-system-menu,
html[dir="rtl"] .irfan-system-menu input,
html[dir="rtl"] .irfan-system-menu button { direction:rtl; text-align:right; }

/* Align the live values with the existing weather-card bounds in the approved canvas. */
.live-weather {
    left: 8.23%;
    top: 84.1%;
    width: 11.5%;
    height: 8.55%;
    min-height: 0;
    padding: .55%;
    background: rgba(5, 5, 5, .97);
    font-size: clamp(4px, 1.12vw, 16px);
}
.live-weather #weatherIcon { font-size: clamp(7px, 1.9vw, 27px); margin-right: .22em; }
.live-weather #weatherTemp { font-size: clamp(6px, 1.4vw, 20px); }
.live-weather .weatherCity { margin-top: .18em; font-size: clamp(4px, .98vw, 14px); }

@media (max-width: 600px) {
    .live-clock {
        min-width: 0;
        padding: 1px 4px;
        font-size: clamp(10px, 3.5vw, 15px);
    }
}

@media (max-width: 900px) {
    .irfan-system-menu { width: min(360px, 55vw); }
}


/* =========================================================
   IRFAN AI — MENU STAGE 2.2 / COLLAPSIBLE GROUPS
   Единый шрифт + сворачиваемые основные разделы.
   ========================================================= */

.irfan-menu-v2,
.irfan-menu-v2 button,
.irfan-menu-v2 input,
.irfan-menu-group > summary,
.irfan-menu-section > summary {
    font-family: "Segoe UI", Arial, sans-serif;
}

/* Historical personal-center group labels remain part of the service-menu shell. */
.irfan-legacy-service-label,
.irfan-menu-status { display: none !important; }

.irfan-menu-group {
    margin: 8px 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    overflow: visible;
}

.irfan-menu-group[hidden] { display:none !important; }

.irfan-menu-group > .irfan-menu-group-summary {
    list-style: none;
    position: relative;
    width: 100%;
    min-height: 40px;
    padding: 10px 34px 10px 12px;
    color: #eadcae;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(205,166,62,.25);
    border-radius: 4px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    user-select: none;
}

.irfan-menu-group > .irfan-menu-group-summary::-webkit-details-marker { display:none; }

.irfan-menu-group > .irfan-menu-group-summary::after {
    content: "›";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    color: #b79443;
    font-size: 19px;
    transition: transform .16s ease, color .16s ease;
}

.irfan-menu-group[open] > .irfan-menu-group-summary::after {
    transform: translateY(-50%) rotate(90deg);
    color: #e1bf63;
}

.irfan-menu-group > .irfan-menu-group-summary:hover,
.irfan-menu-group[open] > .irfan-menu-group-summary {
    color: #f0ce70;
    background: rgba(194,145,35,.12);
    border-color: rgba(213,174,77,.38);
}

.irfan-menu-group-body {
    padding: 4px 4px 3px 12px;
}

/* Внутренние разделы — тот же шрифт, но визуально подчинённый уровень. */
.irfan-menu-section {
    margin: 4px 0;
    border-color: rgba(205,166,62,.18);
}

.irfan-menu-section > summary {
    min-height: 38px;
    padding: 9px 31px 9px 10px;
    color: #e1d5b2;
    font-size: 14px;
    font-weight: 400;
}

.irfan-menu-section > summary:hover,
.irfan-menu-section[open] > summary {
    color: #efd17a;
    background: rgba(194,145,35,.085);
}

.irfan-subitem {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
}

/* Язык / Language внутри раздела «СИСТЕМА». */
.irfan-menu-group-body > .system-menu-item {
    margin: 4px 0;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.irfan-menu-group-body > .language-list {
    padding: 2px 4px 6px 10px;
}

/* Нижние рабочие кнопки — без отдельного заголовка. */
.irfan-menu-footer {
    margin-top: 12px;
    padding-top: 7px;
    border-top: 1px solid rgba(211,174,70,.22);
}

.irfan-menu-footer > .system-menu-item {
    margin-top: 7px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
}

/* Штаб Хозяина не появляется в обычном Меню. */
.irfan-owner-group {
    margin-top: 12px;
    border: 1px solid rgba(230,186,74,.38);
    box-shadow: inset 0 0 14px rgba(182,125,28,.035);
}
.irfan-owner-group > .irfan-menu-group-summary {
    color:#e7c66c;
    border-color:rgba(230,186,74,.40);
}

/* Скрытый вход: удержание IRFAN AI 5 секунд. Никакой визуальной подсказки снаружи. */
.irfan-owner-hold-target {
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.irfan-owner-access-modal {
    position: fixed;
    inset: 0;
    z-index: 60000;
    display: none;
    place-items: center;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(2px);
}
.irfan-owner-access-modal.open { display:grid; }

.irfan-owner-access-card {
    position: relative;
    width: min(340px, 88vw);
    padding: 24px 24px 22px;
    border: 1px solid rgba(218,178,73,.62);
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(14,11,6,.99), rgba(3,3,3,.99));
    box-shadow: 0 22px 60px rgba(0,0,0,.78), inset 0 0 28px rgba(180,120,25,.055);
    color: #eee4c2;
    font-family: "Segoe UI", Arial, sans-serif;
}

.irfan-owner-access-title {
    color:#e1bf63;
    font-family: Georgia, serif;
    font-size: 22px;
    text-align:center;
}

.irfan-owner-access-note {
    margin: 7px 0 14px;
    color:#bfb59a;
    font-size:12px;
    text-align:center;
}

.irfan-owner-pin {
    width:100%;
    padding: 11px 12px;
    border: 1px solid rgba(213,174,77,.38);
    border-radius:5px;
    background:rgba(0,0,0,.38);
    color:#f0dfaa;
    font-size:20px;
    letter-spacing:6px;
    text-align:center;
    outline:none;
}
.irfan-owner-pin:focus {
    border-color:rgba(235,196,95,.72);
    box-shadow:0 0 10px rgba(216,163,48,.10);
}

.irfan-owner-access-submit {
    width:100%;
    margin-top:12px;
    padding:10px 12px;
    border:1px solid rgba(213,174,77,.46);
    border-radius:5px;
    background:rgba(194,145,35,.10);
    color:#ead18a;
    cursor:pointer;
}
.irfan-owner-access-submit:hover { background:rgba(194,145,35,.18); }

.irfan-owner-access-close {
    position:absolute;
    right:10px;
    top:8px;
    width:31px;
    height:31px;
    border:0;
    background:transparent;
    color:#d4b968;
    font-size:22px;
    cursor:pointer;
}

.irfan-owner-access-message {
    min-height:17px;
    margin-top:9px;
    color:#cdbb87;
    font-size:11px;
    text-align:center;
}/* Системное меню всегда выше навигации */
/* Скрывать МЕДЖЛИС только когда открыто системное меню */
#irfanSystemMenu.open ~ .nav.council {
    visibility: hidden !important;
}/* Когда открыто меню "три полоски" — полностью отключить hotspot-зоны Главной */
body:has(#irfanSystemMenu.open) .hotspot {
    visibility: hidden !important;
    pointer-events: none !important;
}
/* Убрать вторую лишнюю стрелку в меню */
.irfan-menu-section > summary::marker {
    content: "";
}

.irfan-menu-section > summary::-webkit-details-marker {
    display: none;
}

/* =========================================================
   HOME / P0 — truthful guest access state
   ========================================================= */
.home-guest-access {
    position: absolute;
    z-index: 3;
    top: 59.75%;
    left: 21.5%;
    width: 68.5%;
    min-height: 8.6%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .9em;
    padding: .7em 1em;
    border: 1px solid rgba(223, 185, 88, .38);
    border-radius: 7px;
    background: linear-gradient(105deg, rgba(11, 10, 7, .93), rgba(29, 23, 12, .89));
    box-shadow: inset 0 1px 0 rgba(246, 218, 144, .06), 0 10px 24px rgba(0, 0, 0, .26);
    color: #d9cfb5;
}

.home-guest-access p {
    grid-column: 1 / -1;
    margin: 0;
    color: #cda950;
    font: 700 clamp(.42rem, .65vw, .68rem)/1 "Segoe UI", Arial, sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.home-guest-access strong { color: #efd17a; font: 600 clamp(.55rem, .95vw, .96rem)/1.2 Georgia, serif; }
.home-guest-access span { color: #c7bda1; font: 400 clamp(.42rem, .67vw, .68rem)/1.35 "Segoe UI", Arial, sans-serif; }
.home-guest-access a,
.irfan-guest-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 7px 12px;
    border: 1px solid rgba(238, 199, 100, .6);
    border-radius: 5px;
    color: #f0d986;
    background: rgba(126, 91, 24, .16);
    font: 600 clamp(.5rem, .74vw, .76rem)/1 "Segoe UI", Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
}
.home-guest-access a:hover,
.home-guest-access a:focus-visible,
.irfan-guest-login:hover,
.irfan-guest-login:focus-visible { background: rgba(159, 113, 27, .28); border-color: #f0d986; outline: none; }

.irfan-menu-guest { margin-top: 8px; }
.irfan-guest-section { margin-top: 0; }
.irfan-guest-links { display: grid; gap: 2px; }
.irfan-guest-links a { display: block; padding: 8px 7px; border-left: 1px solid transparent; border-radius: 3px; color: #cfc5a9; background: transparent; font-size: 11px; line-height: 1.25; text-decoration: none; }
.irfan-guest-links a:hover,
.irfan-guest-links a:focus-visible { color: #f0d98d; border-left-color: rgba(226,184,76,.62); background: rgba(201,148,37,.075); outline: none; }
.irfan-guest-access-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 2px 0; color: #a89d82; font-size: 10px; line-height: 1.35; }
.irfan-guest-login { flex: 0 0 auto; min-height: 30px; padding: 0 11px; font-size: 11px; }

/* =========================================================
   HOME / BLOCK 1 — responsive presentation
   The approved desktop reference remains untouched.  On narrow screens its
   information architecture is presented as an accessible, readable sequence
   of the same routes rather than a scaled-down desktop canvas.
   ========================================================= */
.home-mobile { display: none; }

/* Existing live values occupy the approved top and weather zones.  These
   rules improve legibility without moving either zone or adding new chrome. */
@media (min-width: 601px) {
    .live-clock {
        border-bottom: 1px solid rgba(224, 186, 88, .25);
        box-shadow: 0 5px 14px rgba(0, 0, 0, .24);
        text-shadow: 0 1px 9px rgba(237, 193, 74, .17);
    }

    .live-weather {
        border: 1px solid rgba(215, 176, 78, .22);
        border-radius: 5px;
        box-shadow: inset 0 1px 0 rgba(246, 216, 138, .05), 0 8px 18px rgba(0, 0, 0, .24);
    }
}

@media (max-width: 600px) {
    html, body {
        min-width: 0;
        overflow-x: hidden;
        background: #060604;
    }

    .stage {
        display: block;
        min-height: 100dvh;
        background:
            linear-gradient(180deg, rgba(4, 4, 3, .82) 0%, rgba(5, 5, 4, .90) 43%, rgba(4, 4, 3, .95) 100%),
            radial-gradient(circle at 88% 0%, rgba(193, 150, 58, .18), transparent 31%),
            url("/static/images/heritage-library-cover.png") center top / cover no-repeat,
            #080705;
    }

    .canvas {
        width: 100%;
        min-height: 100dvh;
        aspect-ratio: auto;
        overflow: visible;
        background: transparent;
    }

    .reference,
    .home-live-section-titles,
    .main-approved-crest,
    .main-approved-crest-artifact-mask,
    .main-approved-founder,
    .metrics-panel,
    .home-guest-access,
    .owner-control-entry,
    .hotspot,
    .live-clock,
    .live-weather {
        display: none !important;
    }

    .canvas::before {
        z-index: 0;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, .16), transparent 26%),
            radial-gradient(ellipse at 50% 30%, rgba(196, 150, 57, .06), transparent 58%);
    }

    .canvas::after { display: none; }

    .home-mobile {
        position: relative;
        z-index: 2;
        display: grid;
        gap: 20px;
        width: min(100%, 520px);
        min-height: 100dvh;
        margin: 0 auto;
        padding: 16px 18px max(28px, env(safe-area-inset-bottom));
        color: #eee5cc;
    }

    .home-mobile-header {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        align-items: center;
        min-height: 64px;
        padding: 0;
        border-bottom: 1px solid rgba(215, 176, 78, .32);
    }

    .home-mobile-brand {
        grid-column: 2;
        min-width: 0;
        text-align: center;
    }

    .home-mobile-brand p {
        margin: 0;
        color: #ebcb79;
        font: 700 25px/1 Georgia, "Times New Roman", serif;
        letter-spacing: .035em;
    }

    .home-mobile-brand span,
    .home-mobile-kicker {
        color: #bda66b;
        font: 600 10px/1.35 "Segoe UI", Arial, sans-serif;
        letter-spacing: .14em;
    }

    .home-mobile-founder {
        grid-column: 3;
        justify-self: end;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border: 1px solid rgba(237, 198, 94, .8);
        border-radius: 50%;
        /* A dedicated portrait avoids cutting a face out of the composite home backdrop. */
        background-color: #090907;
        background-image: url("/static/images/founder_approved.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 24%;
        overflow: hidden;
        box-shadow: 0 0 0 3px rgba(7, 6, 4, .9), 0 6px 15px rgba(0, 0, 0, .36);
    }

    .home-mobile-hero {
        position: relative;
        isolation: isolate;
        min-height: 198px;
        padding: 29px 22px 25px;
        overflow: hidden;
        border: 1px solid rgba(215, 176, 78, .23);
        border-radius: 13px;
        background:
            linear-gradient(90deg, rgba(5, 5, 4, .93) 0%, rgba(5, 5, 4, .76) 52%, rgba(5, 5, 4, .47) 100%),
            radial-gradient(circle at 86% 20%, rgba(207, 163, 66, .13), transparent 38%),
            url("/static/images/academy-intellect-cover.png") 56% 50% / cover no-repeat;
        box-shadow: inset 0 1px 0 rgba(245, 216, 138, .07), 0 16px 36px rgba(0, 0, 0, .25);
    }

    .home-mobile-hero::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 46%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(231, 191, 88, .75));
    }

    .home-mobile-hero h1 {
        margin: 9px 0 6px;
        color: #f0d27b;
        font: 700 clamp(31px, 10vw, 43px)/.98 Georgia, "Times New Roman", serif;
        letter-spacing: .025em;
    }

    .home-mobile-hero p:last-child {
        max-width: 28ch;
        margin: 0;
        color: #ded4ba;
        font: 400 14px/1.48 "Segoe UI", Arial, sans-serif;
    }

    .home-mobile-commands,
    .home-mobile-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .home-mobile-guest {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px 12px;
        align-items: start;
        padding: 16px;
        border: 1px solid rgba(205, 166, 68, .35);
        border-radius: 10px;
        background: linear-gradient(145deg, rgba(31, 27, 18, .92), rgba(10, 9, 6, .95));
        box-shadow: inset 0 1px 0 rgba(245, 218, 148, .045);
    }

    .home-access-lock { color: #e2bd5a; font: 700 25px/1 Georgia, serif; }
    .home-mobile-guest strong { display: block; color: #ead07f; font: 600 14px/1.35 Georgia, serif; }
    .home-mobile-guest small { display: block; margin-top: 5px; color: #beb499; font: 400 12px/1.42 "Segoe UI", Arial, sans-serif; }
    .home-mobile-guest a {
        grid-column: 1 / -1;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(241, 204, 113, .64);
        border-radius: 7px;
        color: #eed07c;
        background: rgba(96, 70, 18, .22);
        font: 600 13px/1 "Segoe UI", Arial, sans-serif;
        text-decoration: none;
    }

    .home-mobile-commands a,
    .home-mobile-nav a {
        min-width: 0;
        border: 1px solid rgba(205, 166, 68, .32);
        border-radius: 9px;
        color: #eee4c8;
        background: linear-gradient(145deg, rgba(31, 27, 18, .91), rgba(10, 9, 6, .94));
        box-shadow: inset 0 1px 0 rgba(245, 218, 148, .045);
        text-decoration: none;
        transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }

    .home-mobile-commands a {
        display: grid;
        gap: 6px;
        min-height: 102px;
        padding: 18px 16px 16px;
    }

    .home-mobile-commands a.home-mobile-command--guide {
        grid-column: 1 / -1;
        min-height: 88px;
        background: linear-gradient(112deg, rgba(38, 29, 13, .94), rgba(13, 12, 9, .97));
        border-color: rgba(221, 182, 80, .52);
    }

    .home-mobile-commands a:first-child {
        background: linear-gradient(112deg, rgba(8, 13, 19, .92), rgba(8, 8, 6, .89)), url("/static/images/intelligence/intelligence-public-hero-v1.png") center / cover;
    }

    .home-mobile-commands a:nth-child(2) {
        background: linear-gradient(112deg, rgba(27, 20, 9, .92), rgba(8, 8, 6, .90)), url("/static/images/saudi-opportunities-vision-line-v1.png") center / cover;
    }

    .home-mobile-commands a.home-mobile-command--guide {
        background: linear-gradient(112deg, rgba(28, 20, 8, .89), rgba(9, 9, 7, .94)), url("/static/images/guide/makkah-masjid-al-haram-cc-by-3.jpg") center / cover;
    }

    .home-mobile-commands span {
        color: #e6c66f;
        font: 700 clamp(12px, 3.2vw, 14px)/1.22 Georgia, "Times New Roman", serif;
        letter-spacing: .025em;
    }

    .home-mobile-commands small {
        color: #beb499;
        font: 400 12px/1.42 "Segoe UI", Arial, sans-serif;
    }

    .home-mobile-nav a {
        display: flex;
        align-items: center;
        position: relative;
        min-height: 56px;
        padding: 13px 14px 13px 17px;
        font: 600 13px/1.3 "Segoe UI", Arial, sans-serif;
        letter-spacing: .005em;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .home-mobile-nav a:nth-child(1) { background-image: linear-gradient(100deg, rgba(10, 9, 6, .95), rgba(12, 11, 8, .82)), url("/static/images/heritage-library-cover.png"); }
    .home-mobile-nav a:nth-child(2) { background-image: linear-gradient(100deg, rgba(9, 10, 8, .94), rgba(9, 10, 8, .82)), url("/static/images/academy/academy-intelligence-v1.png"); }
    .home-mobile-nav a:nth-child(3) { background-image: linear-gradient(100deg, rgba(11, 9, 6, .94), rgba(11, 9, 6, .82)), url("/static/images/business/saudi-business-hero-v1.png"); }
    .home-mobile-nav a:nth-child(4) { background-image: linear-gradient(100deg, rgba(10, 8, 6, .94), rgba(10, 8, 6, .82)), url("/static/images/IRFAN_SHAH_MAJLIS_SOURCE.jpeg"); }
    .home-mobile-nav a:nth-child(5) { background-image: linear-gradient(100deg, rgba(7, 11, 13, .94), rgba(7, 11, 13, .82)), url("/static/images/intelligence/intelligence-public-hero-v1.png"); }
    .home-mobile-nav a:nth-child(6) { background-image: linear-gradient(100deg, rgba(12, 9, 6, .94), rgba(12, 9, 6, .82)), url("/static/images/business/business-collaboration-cover.png"); }
    .home-mobile-nav a:nth-child(7) { background-image: linear-gradient(100deg, rgba(13, 10, 7, .94), rgba(13, 10, 7, .82)), url("/static/images/heritage-library-cover.png"); }
    .home-mobile-nav a:nth-child(8) { background-image: linear-gradient(100deg, rgba(8, 11, 9, .94), rgba(8, 11, 9, .82)), url("/static/images/islamic-center/prophets-mosque-library-cc-by-sa-4.jpg"); }

    .home-mobile-nav a::before {
        content: "";
        width: 2px;
        height: 18px;
        margin-right: 10px;
        background: linear-gradient(180deg, rgba(232, 195, 93, .88), rgba(186, 137, 43, .16));
    }

    .home-mobile-nav a.home-mobile-nav__settings {
        grid-column: 1 / -1;
        justify-content: center;
        color: #dbc176;
        background: linear-gradient(90deg, rgba(27, 22, 12, .90), rgba(11, 9, 6, .96));
    }

    .home-mobile-commands a:hover,
    .home-mobile-commands a:focus-visible,
    .home-mobile-nav a:hover,
    .home-mobile-nav a:focus-visible {
        border-color: rgba(241, 204, 113, .72);
        background: linear-gradient(145deg, rgba(60, 47, 22, .92), rgba(14, 11, 6, .97));
        outline: none;
        transform: translateY(-1px);
    }

    .home-mobile-commands a:active,
    .home-mobile-nav a:active { transform: scale(.985); }

    .home-mobile-utilities {
        display: grid;
        gap: 12px;
        padding-top: 4px;
        border-top: 1px solid rgba(212, 172, 73, .26);
    }

    .home-mobile-utility {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        min-height: 86px;
        padding: 15px;
        overflow: hidden;
        border: 1px solid rgba(213, 175, 77, .42);
        border-radius: 11px;
        color: #f0e6ca;
        text-decoration: none;
        box-shadow: inset 0 1px 0 rgba(255, 229, 153, .08), 0 12px 28px rgba(0, 0, 0, .22);
        background-color: #0d0c09;
        background-position: center;
        background-size: cover;
    }

    .home-mobile-utility--prayer { background-image: linear-gradient(104deg, rgba(11, 16, 14, .94), rgba(10, 10, 7, .78)), url("/static/images/guide/madinah-masjid-an-nabawi-cc-by-sa-4.jpg"); }
    .home-mobile-utility--kaaba { background-image: linear-gradient(104deg, rgba(22, 16, 7, .93), rgba(11, 9, 5, .70)), url("/static/images/guide/makkah-masjid-al-haram-cc-by-3.jpg"); }
    .home-mobile-utility--news { background-image: linear-gradient(104deg, rgba(12, 17, 22, .94), rgba(9, 10, 8, .78)), url("/static/images/saudi-opportunities-vision-line-v1.png"); }

    .home-mobile-utility__mark {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(235, 196, 91, .72);
        border-radius: 50%;
        color: #f1ce72;
        background: rgba(8, 8, 6, .58);
        font: 700 22px/1 Georgia, serif;
    }

    .home-mobile-utility strong,
    .home-mobile-utility small { display: block; }
    .home-mobile-utility strong { color: #f0d27b; font: 700 16px/1.22 Georgia, "Times New Roman", serif; }
    .home-mobile-utility small { margin-top: 5px; color: #d2c7aa; font: 400 12px/1.4 "Segoe UI", Arial, sans-serif; }
    .home-mobile-utility:focus-visible,
    .home-mobile-utility:hover { border-color: rgba(247, 211, 113, .84); outline: none; transform: translateY(-1px); }

    .home-mobile-status {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 45px;
        padding: 11px 13px;
        border-top: 1px solid rgba(205, 166, 68, .24);
        color: #beb395;
        font: 400 12px/1 "Segoe UI", Arial, sans-serif;
    }

    .home-mobile-weather-mark {
        position: relative;
        width: 16px;
        height: 16px;
        border: 1px solid #dfbb57;
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(223, 187, 87, .08);
    }

    .irfan-menu-btn {
        left: 18px;
        top: 31px;
        width: 32px;
        height: 32px;
        z-index: 15000;
    }

    .irfan-menu-btn::before {
        content: "" !important;
        position: absolute;
        display: block !important;
        inset: 9px 7px auto;
        height: 1px;
        background: #e5c36d;
        box-shadow: 0 6px 0 #e5c36d, 0 12px 0 #e5c36d;
    }

    .irfan-system-menu {
        left: 14px;
        top: 70px;
        width: min(360px, calc(100vw - 28px));
        max-height: calc(100dvh - 86px);
        overflow-y: auto;
    }

    html[dir="rtl"] .home-mobile { direction: rtl; text-align: right; }
    html[dir="rtl"] .home-mobile-header { direction: ltr; }
    html[dir="rtl"] .home-mobile-brand { direction: rtl; }
    html[dir="rtl"] .irfan-menu-btn { left: auto; right: 18px; }
    html[dir="rtl"] .irfan-system-menu { left: auto; right: 14px; }
}

/* The small-phone pass keeps every label and touch target comfortable instead
   of compressing the two-column home grid below a readable width. */
@media (max-width: 380px) {
    .home-mobile {
        gap: 16px;
        padding-inline: 14px;
    }

    .home-mobile-header {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        min-height: 58px;
    }

    .home-mobile-brand p { font-size: 22px; }

    .home-mobile-founder {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        /* Center the face in the dedicated square portrait, not the old
           desktop composition. */
        background-position: 50% 24%;
    }

    .home-mobile-commands,
    .home-mobile-nav { grid-template-columns: 1fr; }

    .home-mobile-commands a { min-height: 88px; }

    .home-mobile-commands a.home-mobile-command--guide { grid-column: auto; }

    .home-mobile-nav a.home-mobile-nav__settings { grid-column: auto; }

    .irfan-menu-btn { left: 14px; top: 27px; }
    html[dir="rtl"] .irfan-menu-btn { left: auto; right: 14px; }
}
@import url("/static/css/irfan-design-tokens.css");