/**
 * SmartMaster35 Portal v4 — iOS 26/27 Liquid Glass
 * Полный визуальный редизайн compatible.php (body.sm-portal)
 */

body.sm-portal {
    --sm-bg: #020204;
    --sm-glass: rgba(255, 255, 255, 0.07);
    --sm-glass-2: rgba(255, 255, 255, 0.11);
    --sm-border: rgba(255, 255, 255, 0.18);
    --sm-border-soft: rgba(255, 255, 255, 0.09);
    --sm-text: #f5f5f7;
    --sm-muted: #9898a0;
    --sm-blue: #0a84ff;
    --sm-blue-2: #64d2ff;
    --sm-green: #30d158;
    --sm-purple: #bf5af2;
    --sm-pink: #ff375f;
    --sm-orange: #ff9f0a;
    --sm-radius-xl: 28px;
    --sm-radius-lg: 20px;
    --sm-radius-md: 14px;
    --sm-radius-pill: 999px;
    --sm-blur: blur(40px) saturate(195%);
    --sm-blur-strong: blur(56px) saturate(210%);
    --sm-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.11);
    --sm-shadow-glow: 0 0 80px rgba(10, 132, 255, 0.08), 0 0 120px rgba(191, 90, 242, 0.06);
    --sm-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --sm-shell: min(1120px, calc(100% - 24px));

    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, sans-serif !important;
    background: var(--sm-bg) !important;
    background-image: none !important;
    color: var(--sm-text) !important;
    padding: 0 !important;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.sm-portal::before {
    content: "";
    position: fixed;
    inset: -35%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 45% at 12% 8%, rgba(10, 132, 255, 0.32), transparent 55%),
        radial-gradient(ellipse 50% 40% at 92% 6%, rgba(191, 90, 242, 0.26), transparent 52%),
        radial-gradient(ellipse 45% 38% at 78% 92%, rgba(48, 209, 88, 0.16), transparent 50%),
        radial-gradient(ellipse 40% 35% at 5% 82%, rgba(255, 55, 95, 0.12), transparent 48%),
        radial-gradient(ellipse 30% 25% at 50% 50%, rgba(100, 210, 255, 0.06), transparent 60%);
    animation: smAurora 36s ease-in-out infinite alternate;
}

body.sm-portal::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* ——— Liquid Glass surface ——— */
body.sm-portal .sm-liquid-glass {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid transparent !important;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.02) 100%) !important;
    backdrop-filter: var(--sm-blur-strong) !important;
    -webkit-backdrop-filter: var(--sm-blur-strong) !important;
    box-shadow: var(--sm-shadow), var(--sm-shadow-glow) !important;
}

body.sm-portal .sm-liquid-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.06) 28%,
        rgba(100, 210, 255, 0.18) 50%,
        rgba(191, 90, 242, 0.12) 72%,
        rgba(255, 255, 255, 0.08) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

body.sm-portal .sm-liquid-glass > * {
    position: relative;
    z-index: 1;
}

body.sm-portal .sm-liquid-glass::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 55%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 35%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.03) 65%,
        transparent 100%
    );
    transform: skewX(-18deg);
    animation: smGlassShine 9s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes smGlassShine {
    0%, 72% { transform: translateX(0) skewX(-18deg); opacity: 0; }
    78% { opacity: 1; }
    100% { transform: translateX(280%) skewX(-18deg); opacity: 0; }
}

@keyframes smAurora {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(2%, -2%) scale(1.05); }
}

body.sm-portal .container {
    width: var(--sm-shell) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 20px 0 88px !important;
    position: relative;
    z-index: 1;
}

/* ——— Hero ——— */
body.sm-portal .portal-hero {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "brand lang"
        "actions actions"
        "stats stats"
        "trust trust";
    gap: 16px 20px !important;
    padding: 28px !important;
    margin-bottom: 14px !important;
    border-radius: var(--sm-radius-xl) !important;
}

body.sm-portal .portal-hero.sm-liquid-glass {
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(100, 210, 255, 0.12), transparent 55%),
        linear-gradient(120deg, rgba(10, 132, 255, 0.1), transparent 38%, rgba(191, 90, 242, 0.08)),
        linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.02) 100%) !important;
}

body.sm-portal .portal-hero > * {
    position: relative;
    z-index: 2;
}

/* ——— Showcase banner ——— */
body.sm-portal .portal-showcase {
    margin-bottom: 16px !important;
    padding: 0 !important;
    border-radius: var(--sm-radius-xl) !important;
}

body.sm-portal .portal-showcase__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    animation: smOrbFloat 14s ease-in-out infinite alternate;
}

body.sm-portal .portal-showcase__orb--1 {
    width: 180px;
    height: 180px;
    top: -40px;
    left: -30px;
    background: rgba(10, 132, 255, 0.35);
}

body.sm-portal .portal-showcase__orb--2 {
    width: 140px;
    height: 140px;
    bottom: -30px;
    right: 8%;
    background: rgba(191, 90, 242, 0.28);
    animation-delay: -5s;
}

@keyframes smOrbFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(12px, -8px) scale(1.08); }
}

body.sm-portal .portal-showcase__shine {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 55% at 50% -20%, rgba(255, 255, 255, 0.16), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

body.sm-portal .portal-showcase__inner {
    position: relative;
    z-index: 2;
    padding: 22px 24px 18px;
}

body.sm-portal .portal-showcase__head {
    text-align: center;
    margin-bottom: 18px;
}

body.sm-portal .portal-showcase__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 6px 14px;
    border-radius: var(--sm-radius-pill);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.22), rgba(191, 90, 242, 0.16));
    border: 1px solid rgba(100, 210, 255, 0.32);
    color: #b8e4ff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(10, 132, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body.sm-portal .portal-showcase__title {
    margin: 0 0 8px;
    font-size: clamp(1.15rem, 3.2vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    background: linear-gradient(120deg, #fff 0%, #c8e8ff 40%, #e8c8ff 85%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.sm-portal .portal-showcase__lead {
    margin: 0;
    color: var(--sm-muted);
    font-size: 0.86rem;
    max-width: 48ch;
    margin-inline: auto;
    line-height: 1.45;
}

body.sm-portal .portal-platform-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

body.sm-portal .portal-platform-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px 12px;
    border-radius: var(--sm-radius-lg);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.22);
    transition: transform 0.35s var(--sm-ease), border-color 0.35s var(--sm-ease), box-shadow 0.35s var(--sm-ease);
}

body.sm-portal .portal-platform-chip:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 32px rgba(0, 0, 0, 0.32);
}

body.sm-portal .portal-platform-chip__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    margin-bottom: 2px;
}

body.sm-portal .portal-platform-chip__icon svg {
    width: 22px;
    height: 22px;
}

body.sm-portal .portal-platform-chip--ios .portal-platform-chip__icon {
    background: linear-gradient(145deg, rgba(10, 132, 255, 0.35), rgba(100, 210, 255, 0.15));
    color: #9fd4ff;
    box-shadow: 0 0 24px rgba(10, 132, 255, 0.2);
}

body.sm-portal .portal-platform-chip--ipados .portal-platform-chip__icon {
    background: linear-gradient(145deg, rgba(48, 209, 88, 0.3), rgba(100, 255, 160, 0.12));
    color: #8dffb0;
    box-shadow: 0 0 24px rgba(48, 209, 88, 0.18);
}

body.sm-portal .portal-platform-chip--macos .portal-platform-chip__icon {
    background: linear-gradient(145deg, rgba(191, 90, 242, 0.32), rgba(220, 160, 255, 0.12));
    color: #e4c4ff;
    box-shadow: 0 0 24px rgba(191, 90, 242, 0.2);
}

body.sm-portal .portal-platform-chip--tools .portal-platform-chip__icon {
    background: linear-gradient(145deg, rgba(255, 159, 10, 0.32), rgba(255, 200, 100, 0.12));
    color: #ffd9a0;
    box-shadow: 0 0 24px rgba(255, 159, 10, 0.18);
}

body.sm-portal .portal-platform-chip__name {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

body.sm-portal .portal-platform-chip__range {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--sm-muted);
    letter-spacing: 0.04em;
}

body.sm-portal .portal-showcase__marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    padding: 4px 0 2px;
}

body.sm-portal .portal-showcase__track {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    animation: smMarquee 38s linear infinite;
}

body.sm-portal .portal-showcase__track:hover {
    animation-play-state: paused;
}

@keyframes smMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

body.sm-portal .portal-showcase__tag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--sm-radius-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #d0d0d8;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.sm-portal .portal-showcase__tag--ios {
    background: rgba(10, 132, 255, 0.14);
    border-color: rgba(10, 132, 255, 0.28);
    color: #9fd4ff;
}

body.sm-portal .portal-showcase__tag--mac {
    background: rgba(191, 90, 242, 0.14);
    border-color: rgba(191, 90, 242, 0.28);
    color: #e4c4ff;
}

body.sm-portal .portal-showcase__tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: smPulseDot 2.4s ease-in-out infinite;
}

@keyframes smPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

body.sm-portal .portal-hero .brand {
    grid-area: brand;
}

body.sm-portal .portal-hero .brand::before {
    display: none !important;
}

body.sm-portal .portal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 5px 12px;
    border-radius: var(--sm-radius-pill);
    background: rgba(10, 132, 255, 0.14);
    border: 1px solid rgba(100, 210, 255, 0.28);
    color: #9fd4ff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.sm-portal .portal-hero .brand h1 {
    margin: 0 !important;
    font-size: clamp(1.65rem, 4.5vw, 2.35rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    line-height: 1.05 !important;
    background: linear-gradient(125deg, #fff 0%, #b8dcff 45%, #e4c4ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.sm-portal .portal-hero .brand p {
    margin-top: 8px !important;
    color: var(--sm-muted) !important;
    font-size: 0.95rem !important;
    max-width: 36ch;
}

body.sm-portal .portal-hero .lang-switcher-container {
    grid-area: lang;
    align-self: start;
    margin: 0 !important;
}

body.sm-portal .portal-hero .action-buttons-container {
    grid-area: actions;
    margin: 0 !important;
    justify-content: flex-start !important;
}

body.sm-portal .portal-hero .stats {
    grid-area: stats;
    margin: 0 !important;
    padding-top: 4px !important;
    border-top: 1px solid var(--sm-border-soft) !important;
}

body.sm-portal .portal-hero .trust-strip {
    grid-area: trust;
    margin: 0 !important;
}

/* ——— Dock nav ——— */
body.sm-portal .portal-dock {
    position: sticky;
    top: 10px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 20px !important;
    padding: 8px 10px !important;
    border-radius: var(--sm-radius-pill) !important;
    overflow-x: auto;
    scrollbar-width: none;
}

body.sm-portal .portal-dock::-webkit-scrollbar {
    display: none;
}

body.sm-portal .portal-dock a {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 9px 16px !important;
    border-radius: var(--sm-radius-pill) !important;
    color: #c8c8d0 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
    transition: all 0.3s var(--sm-ease) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

body.sm-portal .portal-dock .dock-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.92;
}

body.sm-portal .portal-dock .dock-icon--telegram,
body.sm-portal .fab-icon--telegram {
    fill: currentColor;
    stroke: none;
}

body.sm-portal .portal-dock a:hover .dock-icon,
body.sm-portal .portal-dock a.active .dock-icon {
    opacity: 1;
}

body.sm-portal .portal-dock a.dock-link-external .dock-icon--telegram {
    color: #7dd3fc;
}

body.sm-portal .portal-dock a:hover,
body.sm-portal .portal-dock a.active {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.sm-portal .portal-dock-fmi {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--sm-radius-pill);
    border: 1px solid rgba(48, 209, 88, 0.45);
    background: linear-gradient(180deg, rgba(61, 224, 106, 0.28), rgba(40, 192, 79, 0.18));
    color: #d7ffe3 !important;
    font-size: 0.8rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(48, 209, 88, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: all 0.3s var(--sm-ease);
}

body.sm-portal .portal-dock-fmi:hover {
    background: linear-gradient(180deg, rgba(61, 224, 106, 0.38), rgba(40, 192, 79, 0.28));
    border-color: rgba(72, 230, 120, 0.65);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(48, 209, 88, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.sm-portal .portal-dock-fmi .dock-icon {
    color: #9ef5b8;
}

body.sm-portal .fmi-btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    line-height: 1.25;
}

body.sm-portal .fmi-btn-sep {
    opacity: 0.55;
}

body.sm-portal .fmi-btn-state {
    font-weight: 800;
}

body.sm-portal .portal-dock-fmi .fmi-btn-text {
    font-size: 0.8rem;
}

body.sm-portal .btn-fmi-feature.is-online {
    background: linear-gradient(180deg, #3de06a, #28c04f) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 8px 24px rgba(48, 209, 88, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body.sm-portal .btn-fmi-feature.is-offline {
    background: linear-gradient(180deg, rgba(71, 85, 105, 0.92), rgba(51, 65, 85, 0.96)) !important;
    color: rgba(226, 232, 240, 0.72) !important;
    border-color: rgba(100, 116, 139, 0.35) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
    filter: none !important;
}

body.sm-portal .btn-fmi-feature.is-offline:hover {
    filter: none !important;
    transform: none !important;
}

body.sm-portal .portal-dock-fmi.is-online {
    border-color: rgba(48, 209, 88, 0.45);
    background: linear-gradient(180deg, rgba(61, 224, 106, 0.28), rgba(40, 192, 79, 0.18));
    color: #d7ffe3 !important;
}

body.sm-portal .portal-dock-fmi.is-offline {
    border-color: rgba(100, 116, 139, 0.35);
    background: linear-gradient(180deg, rgba(71, 85, 105, 0.88), rgba(51, 65, 85, 0.92));
    color: rgba(226, 232, 240, 0.72) !important;
    box-shadow: none;
    cursor: not-allowed;
}

body.sm-portal .portal-dock-fmi.is-offline:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(100, 116, 139, 0.35);
    color: rgba(226, 232, 240, 0.72) !important;
}

body.sm-portal .portal-dock-fmi.is-offline .dock-icon {
    color: rgba(203, 213, 225, 0.65);
}

body.sm-portal .portal-dock-apps {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--sm-radius-pill);
    border: 1px solid rgba(56, 189, 248, 0.45);
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.32), rgba(2, 132, 199, 0.18));
    color: #e0f2fe !important;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.22);
    white-space: nowrap;
}

body.sm-portal .portal-dock-apps:hover {
    color: #fff !important;
    border-color: rgba(125, 211, 252, 0.75);
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.45), rgba(2, 132, 199, 0.3));
}

body.sm-portal .apps-fab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.95), rgba(2, 132, 199, 0.92));
    color: #fff !important;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 10px 28px rgba(14, 165, 233, 0.35);
}

body.sm-portal .apps-fab:hover {
    color: #fff !important;
    filter: brightness(1.05);
}

body.sm-portal .btn-apps {
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.95), rgba(2, 132, 199, 0.92)) !important;
    color: #fff !important;
    border: 1px solid rgba(125, 211, 252, 0.45) !important;
    box-shadow: 0 8px 22px rgba(14, 165, 233, 0.28);
    font-weight: 800 !important;
}

body.sm-portal .btn-fmi-feature {
    background: linear-gradient(180deg, #3de06a, #28c04f) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 8px 24px rgba(48, 209, 88, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    font-weight: 800 !important;
}

body.sm-portal .btn-fmi-feature:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* ——— Main sections ——— */
body.sm-portal .portal-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.sm-portal .portal-section {
    border-radius: var(--sm-radius-xl) !important;
    padding: 22px !important;
    margin-bottom: 0 !important;
}

body.sm-portal .portal-section-head {
    margin-bottom: 14px;
}

body.sm-portal .portal-section-title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

body.sm-portal .portal-section-lead {
    margin: 0;
    font-size: 0.84rem;
    color: var(--sm-muted);
    line-height: 1.45;
}

/* ——— Devices panel ——— */
body.sm-portal .devices-panel {
    position: static !important;
    margin: 0 0 14px !important;
    padding: 16px !important;
    border-radius: var(--sm-radius-lg) !important;
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid var(--sm-border-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.sm-portal .devices-panel-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
}

/* ——— Device grid ——— */
body.sm-portal #models-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 12px !important;
    grid-auto-rows: minmax(200px, auto) !important;
}

body.sm-portal #models-grid > .model-card {
    height: auto !important;
    min-height: 200px !important;
    max-height: 280px !important;
    padding: 14px !important;
    border-radius: var(--sm-radius-lg) !important;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(24px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
    transition: transform 0.38s var(--sm-ease), box-shadow 0.38s var(--sm-ease), border-color 0.38s var(--sm-ease) !important;
}

body.sm-portal #models-grid > .model-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(100, 210, 255, 0.32) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(100, 210, 255, 0.1) !important;
}

body.sm-portal #models-grid > .model-card .model-header {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom-color: var(--sm-border-soft) !important;
}

body.sm-portal .ver-item {
    border-radius: var(--sm-radius-pill) !important;
    background: rgba(48, 209, 88, 0.12) !important;
    border: 1px solid rgba(48, 209, 88, 0.28) !important;
    font-size: 0.8rem !important;
}

/* ——— Controls ——— */
body.sm-portal .search-input,
body.sm-portal .filter-select {
    border-radius: var(--sm-radius-md) !important;
    background: rgba(0, 0, 0, 0.32) !important;
    border: 1px solid var(--sm-border-soft) !important;
    color: #fff !important;
    min-height: 44px !important;
}

body.sm-portal .search-input:focus,
body.sm-portal .filter-select:focus {
    border-color: rgba(10, 132, 255, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.16) !important;
    outline: none !important;
}

body.sm-portal .reset-btn {
    border-radius: var(--sm-radius-md) !important;
    border: 1px solid rgba(255, 55, 95, 0.28) !important;
    color: #ff8fa8 !important;
    background: rgba(255, 55, 95, 0.08) !important;
}

body.sm-portal .tool-filter-chip {
    border-radius: var(--sm-radius-pill) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--sm-border-soft) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
}

body.sm-portal .tool-filter-chip.active {
    background: rgba(10, 132, 255, 0.2) !important;
    border-color: rgba(10, 132, 255, 0.42) !important;
    color: #d6ecff !important;
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.18) !important;
}

body.sm-portal .compat-checker-btn {
    border-radius: var(--sm-radius-md) !important;
    background: linear-gradient(180deg, #3de06a, #30d158) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 22px rgba(48, 209, 88, 0.28) !important;
}

/* ——— Stats & trust ——— */
body.sm-portal .stat-item {
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--sm-border-soft) !important;
    transition: transform 0.3s var(--sm-ease);
}

body.sm-portal .stat-item:hover {
    transform: translateY(-2px);
}

body.sm-portal .stat-val {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    background: linear-gradient(180deg, #fff, #9fd0ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.sm-portal .stat-lbl {
    color: var(--sm-muted) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
}

body.sm-portal .trust-pill {
    border-radius: var(--sm-radius-pill) !important;
    background: rgba(48, 209, 88, 0.1) !important;
    border: 1px solid rgba(48, 209, 88, 0.24) !important;
    color: #8dffb0 !important;
    font-size: 0.72rem !important;
}

/* ——— Buttons ——— */
body.sm-portal .lang-switcher {
    border-radius: 14px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--sm-border-soft) !important;
    padding: 3px !important;
}

body.sm-portal .lang-btn {
    border-radius: 11px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    transition: all 0.28s var(--sm-ease) !important;
}

body.sm-portal .lang-btn.active {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body.sm-portal .btn {
    border-radius: var(--sm-radius-md) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: all 0.28s var(--sm-ease) !important;
}

body.sm-portal .btn-upload {
    background: rgba(48, 209, 88, 0.14) !important;
    border-color: rgba(48, 209, 88, 0.3) !important;
    color: #8dffb0 !important;
}

body.sm-portal .btn-upload:hover {
    background: linear-gradient(180deg, #3de06a, #30d158) !important;
    color: #041208 !important;
}

body.sm-portal .btn-home {
    background: rgba(10, 132, 255, 0.12) !important;
    border-color: rgba(10, 132, 255, 0.28) !important;
    color: #9fd0ff !important;
}

body.sm-portal .btn-home:hover {
    background: linear-gradient(180deg, #3d9dff, #0a84ff) !important;
    color: #fff !important;
}

body.sm-portal .btn-glow {
    background: linear-gradient(135deg, rgba(191, 90, 242, 0.2), rgba(255, 55, 95, 0.16)) !important;
    border-color: rgba(191, 90, 242, 0.32) !important;
    color: #f0d4ff !important;
}

body.sm-portal .btn-glow:hover {
    background: linear-gradient(135deg, #bf5af2, #ff375f) !important;
    color: #fff !important;
}

body.sm-portal .download-btn:not(.download-btn-soon) {
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(10, 132, 255, 0.96), rgba(0, 102, 204, 0.96)) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 28px rgba(10, 132, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    font-weight: 700 !important;
}

body.sm-portal .download-btn:not(.download-btn-soon):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(10, 132, 255, 0.38) !important;
}

body.sm-portal .download-btn-soon {
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px dashed var(--sm-border-soft) !important;
}

/* ——— Download blocks ——— */
body.sm-portal .download-section {
    text-align: left !important;
}

body.sm-portal .download-section h2,
body.sm-portal .info-section h2,
body.sm-portal .disclaimer-section h2 {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    margin-bottom: 16px !important;
}

body.sm-portal .download-toc {
    border-radius: var(--sm-radius-lg) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--sm-border-soft) !important;
    padding: 12px !important;
}

body.sm-portal .download-toc a {
    border-radius: var(--sm-radius-pill) !important;
    background: rgba(48, 209, 88, 0.1) !important;
    border: 1px solid rgba(48, 209, 88, 0.22) !important;
    color: #8dffb0 !important;
    transition: transform 0.25s var(--sm-ease);
}

body.sm-portal .download-toc a:hover {
    transform: translateY(-1px);
    background: rgba(48, 209, 88, 0.18) !important;
}

body.sm-portal .download-tool-block {
    margin-bottom: 12px !important;
    padding: 16px !important;
    border-radius: var(--sm-radius-lg) !important;
    background: rgba(0, 0, 0, 0.18) !important;
    border: 1px solid var(--sm-border-soft) !important;
    border-bottom: 1px solid var(--sm-border-soft) !important;
}

body.sm-portal .tool-ios-range {
    border-radius: var(--sm-radius-pill) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 20px rgba(100, 210, 255, 0.12) !important;
}

body.sm-portal .tool-compat-note {
    border-radius: 0 var(--sm-radius-md) var(--sm-radius-md) 0 !important;
    background: rgba(10, 132, 255, 0.08) !important;
    border-left-color: rgba(10, 132, 255, 0.5) !important;
}

/* ——— Info / FAQ / changelog ——— */
body.sm-portal .info-item,
body.sm-portal .faq-section .faq-item {
    border-radius: var(--sm-radius-lg) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--sm-border-soft) !important;
    padding: 16px !important;
    transition: border-color 0.3s var(--sm-ease), transform 0.3s var(--sm-ease);
}

body.sm-portal .info-item:hover,
body.sm-portal .faq-section .faq-item:hover {
    border-color: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-1px);
}

body.sm-portal .info-grid {
    gap: 12px !important;
}

body.sm-portal .changelog-tag {
    border-radius: var(--sm-radius-pill) !important;
}

body.sm-portal .updates-group-label {
    color: var(--sm-muted) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
}

/* ——— Footer ——— */
body.sm-portal .disclaimer-section,
body.sm-portal .contact-info {
    border-radius: var(--sm-radius-xl) !important;
    background: linear-gradient(160deg, rgba(255, 159, 10, 0.08), rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid rgba(255, 159, 10, 0.18) !important;
}

body.sm-portal .contact-info {
    background: linear-gradient(160deg, rgba(10, 132, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
    border-color: rgba(10, 132, 255, 0.18) !important;
    border-radius: var(--sm-radius-lg) !important;
    padding: 16px 20px !important;
    text-align: center;
}

body.sm-portal .contact-info a {
    color: var(--sm-blue-2) !important;
}

/* ——— Modals ——— */
body.sm-portal .modal-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(28px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
}

body.sm-portal .modal {
    border-radius: var(--sm-radius-xl) !important;
    background: linear-gradient(165deg, rgba(38, 38, 46, 0.96), rgba(18, 18, 24, 0.98)) !important;
    border: 1px solid var(--sm-border) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65) !important;
}

body.sm-portal details.instruction-details {
    border-radius: var(--sm-radius-md) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--sm-border-soft) !important;
}

body.sm-portal .instruction-guide .instruction-callout {
    margin: 12px 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--sm-border-soft);
    line-height: 1.55;
    font-size: 0.92rem;
}

body.sm-portal .instruction-callout--info {
    background: rgba(91, 140, 255, 0.1);
    border-color: rgba(91, 140, 255, 0.28);
}

body.sm-portal .instruction-callout--warn {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fde68a;
}

body.sm-portal .instruction-callout--success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

body.sm-portal .instruction-guide h4 {
    color: #fff;
    margin: 18px 0 10px;
    font-size: 1rem;
    font-weight: 700;
}

body.sm-portal .instruction-kv {
    display: grid;
    gap: 6px;
    margin: 12px 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--sm-border-soft);
}

body.sm-portal .instruction-kv-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

body.sm-portal .instruction-kv-label {
    color: var(--text-muted, #94a3b8);
    min-width: 52px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.sm-portal .instruction-kv-from code {
    color: #fca5a5;
}

body.sm-portal .instruction-kv-to code {
    color: #86efac;
}

body.sm-portal .instruction-arrow {
    color: var(--accent, #5b8cff);
    font-weight: 700;
    font-size: 1.1rem;
    padding-left: 52px;
}

body.sm-portal .alert {
    border-radius: var(--sm-radius-lg) !important;
    backdrop-filter: blur(12px);
}

/* ——— FAB ——— */
body.sm-portal .fab-stack {
    z-index: 950;
}

body.sm-portal .scroll-top-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(58, 58, 66, 0.95), rgba(28, 28, 34, 0.98)) !important;
    border: 1px solid var(--sm-border) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45) !important;
    color: #fff !important;
}

body.sm-portal .fab-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.sm-portal .fab-icon--telegram {
    fill: currentColor;
    stroke: none;
    width: 22px;
    height: 22px;
}

body.sm-portal .telegram-fab {
    background: linear-gradient(180deg, #2AABEE, #1E96D1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 14px 40px rgba(42, 171, 238, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body.sm-portal .model-card-highlight {
    outline: 2px solid rgba(100, 210, 255, 0.75) !important;
    box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.14) !important;
}

/* ——— Mobile ——— */
@media (max-width: 768px) {
    body.sm-portal .container {
        width: min(100% - 16px, 1120px) !important;
        padding: 12px 0 80px !important;
    }

    body.sm-portal .portal-hero {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "lang"
            "actions"
            "stats"
            "trust" !important;
        padding: 18px !important;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    body.sm-portal .portal-hero .brand {
        min-width: 0;
        max-width: 100%;
    }

    body.sm-portal .portal-hero .trust-strip {
        max-width: 100%;
    }

    body.sm-portal .portal-hero .action-buttons-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.sm-portal .portal-hero .action-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 100%;
    }

    body.sm-portal .portal-hero .action-buttons .btn {
        width: 100% !important;
        max-width: 100%;
        min-width: 0 !important;
        flex: none !important;
        white-space: normal !important;
        word-break: break-word;
        text-align: center;
        justify-content: center;
        font-size: 0.74rem;
        line-height: 1.25;
        padding: 10px 8px;
    }

    body.sm-portal .portal-hero .stats {
        min-width: 0;
        max-width: 100%;
    }

    body.sm-portal .portal-hero .stat-item {
        min-width: 0 !important;
    }

    body.sm-portal .portal-hero .lang-switcher-container {
        width: 100%;
    }

    body.sm-portal .portal-hero .lang-switcher {
        width: 100%;
        overflow-x: auto;
    }

    body.sm-portal .portal-dock a[href*="t.me"] {
        display: none;
    }

    body.sm-portal .portal-platform-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.sm-portal .portal-showcase__inner {
        padding: 16px 14px 14px;
    }

    body.sm-portal .portal-showcase__title {
        font-size: 1.05rem;
    }

    body.sm-portal .portal-platform-chip {
        padding: 10px 8px;
    }

    body.sm-portal .portal-platform-chip__icon {
        width: 30px;
        height: 30px;
    }

    body.sm-portal .portal-platform-chip__icon svg {
        width: 18px;
        height: 18px;
    }

    body.sm-portal .portal-showcase__tag {
        font-size: 0.66rem;
        padding: 6px 11px;
    }

    body.sm-portal .devices-panel-hint {
        display: none;
    }

    body.sm-portal .devices-panel-row--filter {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    body.sm-portal .devices-panel-row--filter .search-input {
        grid-column: 1 / -1;
    }

    body.sm-portal .devices-panel-row--filter .filter-select {
        grid-column: 1;
        min-width: 0;
    }

    body.sm-portal .devices-panel-row--filter .reset-btn {
        grid-column: 2;
    }

    body.sm-portal .portal-dock-fmi {
        order: -1;
    }

    body.sm-portal .tool-filter-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    body.sm-portal .tool-filter-chips::-webkit-scrollbar {
        display: none;
    }

    body.sm-portal #models-grid {
        grid-template-columns: 1fr !important;
    }

    body.sm-portal #models-grid > .model-card {
        max-height: 268px !important;
    }

    body.sm-portal .portal-section {
        padding: 16px !important;
        border-radius: 22px !important;
    }

    /* Меньше blur/анимаций — Safari и Yandex на iOS часто роняют вкладку по памяти */
    body.sm-portal::before {
        animation: none !important;
    }

    body.sm-portal .sm-liquid-glass::before,
    body.sm-portal .sm-liquid-glass::after,
    body.sm-portal .portal-showcase__orb,
    body.sm-portal .portal-showcase__shine {
        display: none !important;
    }

    body.sm-portal .sm-liquid-glass,
    body.sm-portal .modal-overlay,
    body.sm-portal .modal,
    body.sm-portal .portal-dock,
    body.sm-portal .scroll-top-fab,
    body.sm-portal .telegram-fab {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.sm-portal #models-grid > .model-card {
        content-visibility: auto;
        contain-intrinsic-size: auto 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.sm-portal::before {
        animation: none;
    }

    body.sm-portal .sm-liquid-glass::after,
    body.sm-portal .portal-showcase__track,
    body.sm-portal .portal-showcase__orb,
    body.sm-portal .portal-showcase__tag-dot {
        animation: none !important;
    }

    body.sm-portal * {
        animation-duration: 0.01ms !important;
    }
}