/* ========================================================================== 
   WORLD-TV PORTAL v44
   Тёмное стекло + встроенные SVG-иконки + рабочий личный кабинет
========================================================================== */

* { box-sizing: border-box; }
html, body {
    width: 1280px;
    height: 720px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #050207;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}
.is-hidden { display: none !important; }

/* START SCREEN */
.wtv-start-page {
    position: relative;
    width: 1280px;
    height: 720px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(160, 0, 35, 0.20), transparent 35%),
        radial-gradient(circle at 84% 78%, rgba(110, 0, 22, 0.18), transparent 32%),
        linear-gradient(135deg, #050207 0%, #09040a 50%, #030305 100%);
}
.wtv-splash-wrap { position: absolute; left: 0; top: -22px; width: 1280px; height: 720px; text-align: center; z-index: 2; }
.wtv-splash-image { width: 1260px; height: 720px; margin-top: 22px; object-fit: contain; display: inline-block; animation: wtvSplashBreath 4.2s ease-in-out infinite; }
.wtv-fallback-logo { display: none; position: absolute; left: 0; top: 120px; width: 1280px; text-align: center; animation: wtvSplashBreath 4.2s ease-in-out infinite; }
.wtv-fallback-name { color: #fff; font-size: 88px; line-height: 96px; font-weight: 900; letter-spacing: -4px; text-shadow: 0 0 28px rgba(255,18,83,.42), 0 20px 50px rgba(0,0,0,.68); }
.wtv-fallback-sub { margin-top: 14px; color: rgba(255,255,255,.62); font-size: 25px; line-height: 32px; font-weight: 800; letter-spacing: 7px; }
.wtv-dark-overlay { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; z-index: 3; background: radial-gradient(circle at 50% 50%, rgba(130,0,32,.10) 0%, rgba(0,0,0,0) 42%), linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.06) 55%, rgba(0,0,0,.34) 100%); pointer-events: none; }
.wtv-loading-zone { position: absolute; left: 50%; top: 575px; width: 430px; height: 104px; margin-left: -215px; text-align: center; z-index: 5; opacity: 1; transition: opacity .28s ease; }
.wtv-loading-zone.is-hidden { opacity: 0; visibility: hidden; }
.wtv-loading-title { margin-bottom: 12px; font-size: 20px; line-height: 24px; font-weight: bold; text-shadow: 0 0 18px rgba(255,25,90,.34); }
.wtv-loading-track { width: 430px; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.11); border: 1px solid rgba(255,75,120,.20); }
.wtv-loading-progress { width: 0%; height: 8px; border-radius: 999px; background: linear-gradient(90deg,#9d002f 0%,#ff155c 42%,#ff5c92 72%,#ff165e 100%); box-shadow: 0 0 14px rgba(255,35,100,.72), 0 0 32px rgba(255,35,100,.34); transition: width .34s ease; }
.wtv-loading-text { margin-top: 11px; min-height: 20px; font-size: 15px; line-height: 19px; color: rgba(235,235,245,.84); }
.wtv-activate-box { position: absolute; left: 50%; top: 430px; width: 760px; height: 228px; margin-left: -380px; z-index: 10; text-align: center; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .30s ease, transform .30s ease, visibility .30s ease; }
.wtv-activate-box.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.wtv-activate-title { font-size: 31px; line-height: 36px; font-weight: bold; text-shadow: 0 0 22px rgba(255,16,80,.32); }
.wtv-activate-subtitle { margin-top: 9px; font-size: 18px; line-height: 22px; color: rgba(242,242,248,.82); }
.wtv-code-row { width: 540px; height: 70px; margin: 22px auto 0 auto; text-align: center; white-space: nowrap; }
.wtv-code-cell { display: inline-block; width: 68px; height: 68px; margin: 0 8px; border-radius: 18px; border: 2px solid rgba(255,89,131,.42); background: rgba(11,5,13,.70); box-shadow: inset 0 0 16px rgba(255,0,72,.06), 0 0 12px rgba(255,0,72,.10); color: rgba(255,255,255,.78); font-size: 34px; line-height: 64px; font-weight: bold; text-align: center; vertical-align: middle; }
.wtv-code-cell.is-filled { color: #fff; border-color: rgba(255,82,130,.92); background: rgba(100,8,34,.72); box-shadow: inset 0 0 18px rgba(255,16,92,.16), 0 0 22px rgba(255,20,84,.32); }
.wtv-code-cell.is-error { border-color: rgba(255,70,70,.98); box-shadow: inset 0 0 18px rgba(255,0,0,.18), 0 0 22px rgba(255,60,60,.42); }
.wtv-activate-message { margin-top: 17px; min-height: 22px; font-size: 17px; line-height: 22px; color: rgba(241,241,248,.84); }
.wtv-activate-message.is-error { color: #ff7d8c; }
.wtv-activate-message.is-success { color: #81ffb0; }
.wtv-activate-hint { margin-top: 8px; font-size: 13px; line-height: 17px; color: rgba(255,255,255,.42); }

/* PORTAL */
.portal-main {
    position: relative;
    width: 1280px;
    height: 720px;
    overflow: hidden;
    background: url("assets/img/bg.jpg") center center no-repeat;
    background-size: cover;
}
.portal-bg-shade {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,20,88,.16), transparent 34%),
        radial-gradient(circle at 80% 76%, rgba(0,180,255,.12), transparent 32%),
        linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.54));
    pointer-events: none;
}
.header {
    position: relative;
    z-index: 3;
    height: 86px;
    padding: 0 40px;
    background: rgba(0,0,0,.58);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.logo { height: 44px; margin-top: 20px; float: left; }
#clock { position: absolute; top: 27px; right: 42px; font-size: 25px; line-height: 30px; font-weight: 900; text-shadow: 0 0 18px rgba(255,255,255,.22); }

.portal-grid {
    position: relative;
    z-index: 2;
    width: 1068px;
    height: 430px;
    margin: 50px auto 0;
}
.item {
    float: left;
    position: relative;
    width: 316px;
    height: 184px;
    margin: 15px 20px;
    padding: 20px 20px 18px 22px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 25px;
    background:
        linear-gradient(145deg, rgba(8,10,16,.86), rgba(17,20,30,.68)),
        rgba(0,0,0,.72);
    border: 2px solid rgba(255,255,255,.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 18px 38px rgba(0,0,0,.44);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.tile-light {
    display: none !important;
}
.tile-icon {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(0,0,0,.34);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -14px 26px rgba(0,0,0,.20),
        0 12px 24px rgba(0,0,0,.32);
}
.tile-icon svg {
    display: block;
    width: 62px;
    height: 62px;
    fill: none;
    stroke: rgba(255,255,255,.92);
    stroke-width: 4.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.12));
}
.tile-icon svg path[fill],
.tile-icon svg rect[fill],
.tile-icon svg circle[fill] {
    fill: none;
}
.item .label {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 16px;
    color: #ffffff;
    font-size: 23px;
    line-height: 28px;
    font-weight: 900;
    letter-spacing: .1px;
    text-shadow: 0 2px 16px rgba(0,0,0,.70);
}
.tile-desc {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.66);
    font-size: 15px;
    line-height: 19px;
    font-weight: 700;
}
.item.active {
    transform: scale(1.035);
    border-color: rgba(255, 47, 95, .94);
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.022)),
        linear-gradient(180deg, rgba(21,21,25,.90), rgba(2,2,4,.80)),
        rgba(0,0,0,.86);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -24px 44px rgba(0,0,0,.36),
        0 0 0 1px rgba(255,255,255,.07),
        0 0 26px rgba(255, 25, 82, .44),
        0 24px 54px rgba(0,0,0,.60);
}
.item.active:before {
    opacity: .42;
}
.item.active .tile-icon {
    background:
        linear-gradient(145deg, rgba(255,47,95,.22), rgba(255,255,255,.035)),
        rgba(0,0,0,.48);
    border-color: rgba(255,90,125,.42);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 0 24px rgba(255,25,82,.22),
        0 12px 24px rgba(0,0,0,.36);
}
.item.active .tile-icon svg {
    stroke: #ffffff;
    filter: drop-shadow(0 0 9px rgba(255, 41, 92, .34));
}
.portal-help {
    position: absolute;
    left: 0;
    bottom: 57px;
    z-index: 3;
    width: 1280px;
    text-align: center;
    color: rgba(255,255,255,.58);
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
}
.portal-logout {
    position: fixed;
    right: 28px;
    bottom: 54px;
    z-index: 30;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    padding: 12px 18px;
    background: rgba(0,0,0,.58);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    opacity: .88;
}
.ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 1280px;
    height: 40px;
    background: rgba(0,0,0,.86);
    overflow: hidden;
    z-index: 20;
    border-top: 1px solid rgba(255,255,255,.10);
}
.ticker-inner {
    position: absolute;
    white-space: nowrap;
    color: #fff;
    font-size: 22px;
    line-height: 40px;
    left: 0;
    text-shadow: 0 0 12px rgba(255,255,255,.16);
}

/* ACCOUNT MODAL */
.account-modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1280px;
    height: 720px;
    z-index: 60;
    background: transparent;
    pointer-events: auto;
}
.account-card {
    position: absolute;
    left: 380px;
    top: 166px;
    width: 520px;
    min-height: 0;
    transform: none;
    padding: 24px 34px 20px;
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
        linear-gradient(180deg, rgba(18,18,22,.80), rgba(2,2,4,.70)),
        rgba(0,0,0,.58);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 20px 56px rgba(0,0,0,.58),
        0 0 24px rgba(255,31,92,.16);
}
.account-card:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background:
        linear-gradient(110deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.035) 27%, transparent 54%),
        radial-gradient(circle at 88% 12%, rgba(255,255,255,.08), transparent 28%);
    pointer-events: none;
}
.account-close {
    position: absolute;
    right: 18px;
    top: 16px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    background: rgba(0,0,0,.34);
    color: #fff;
    font-size: 28px;
    line-height: 34px;
    cursor: pointer;
}
.account-badge,
.account-title,
.account-info,
.account-note {
    position: relative;
    z-index: 2;
}
.account-badge {
    display: inline-block;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255,23,89,.18);
    border: 1px solid rgba(255,99,141,.26);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
}
.account-title {
    margin-top: 10px;
    padding-bottom: 10px;
    font-size: 30px;
    line-height: 34px;
    font-weight: 900;
    border-bottom: 1px solid rgba(255,255,255,.14);
    text-shadow: 0 0 18px rgba(0,0,0,.55);
}
.account-subtitle {
    display: none;
}
.account-info {
    margin-top: 12px;
}
.account-row {
    min-height: 46px;
    margin: 0;
    padding: 9px 0 8px;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.17);
    box-shadow: none;
}
.account-row span {
    display: block;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    line-height: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
}
.account-row strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 21px;
    line-height: 26px;
    font-weight: 900;
}
.account-row:nth-child(2) strong {
    color: #ff326b;
    letter-spacing: 1.4px;
    text-shadow: 0 0 12px rgba(255,50,107,.25);
}
.account-note {
    margin-top: 14px;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    line-height: 18px;
}
.portal-logout {
    display: none !important;
}

@keyframes wtvSplashBreath { 0% { transform: scale(1); opacity: .99; } 50% { transform: scale(1.003); opacity: 1; } 100% { transform: scale(1); opacity: .99; } }