/* =====================================
   GAMEHUB ONLINE — WHITE 3D UI
===================================== */

*{ box-sizing:border-box; margin:0; padding:0; font-family:"Segoe UI", Arial, sans-serif; }
body{ background:#ffffff; color:#20242a; min-height:100vh; }
.hidden{ display:none!important; }

/* AUTH */
.auth-screen{ width:100%; height:100vh; display:flex; justify-content:center; align-items:center;
    background:radial-gradient(circle at top, #d9ecff, transparent 45%), #f5f6f8; }
.auth-card{ width:420px; padding:40px; background:white; border-radius:30px;
    box-shadow:0 20px 50px rgba(0,0,0,.18); text-align:center; }
.logo{
    width:110px; height:110px; margin:auto;
    display:flex; align-items:center; justify-content:center;
    border-radius:24px;
    background:#000;
    position:relative;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.9),
        0 0 40px rgba(0,0,0,.35),
        0 14px 34px rgba(0,0,0,.30),
        0 0 60px rgba(90,150,255,.20);
    overflow:hidden;
}
.logo::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), transparent 60%);
    pointer-events:none;
}
.logo svg{ width:86%; height:86%; display:block; }

.auth-card h1{ margin-top:22px; font-size:24px; letter-spacing:1.5px;
    background:linear-gradient(135deg,#1a2332 0%,#1b4aa8 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:900; }
.auth-card p{ color:#777; margin:10px 0 25px; }
.auth-tabs{ display:flex; gap:10px; margin-bottom:20px; }
.auth-tabs button{ flex:1; height:45px; border:none; border-radius:15px; cursor:pointer;
    background:#ddd; font-weight:700; font-size:14px; transition:.2s; }
.auth-tabs button.active{ background:#9dccff; color:#003f80;
    box-shadow:0 4px 10px rgba(0,140,255,.35); }
#auth-message{ min-height:18px; margin-bottom:8px; font-size:13px; color:#c33; }
#auth-message.ok{ color:#1e8f4a; }

.auth-terms{ font-size:12px !important; color:#8a94a8 !important;
    margin:18px 0 0 !important; text-align:center; }
.auth-terms a{ color:#1b4aa8; font-weight:700; text-decoration:none;
    border-bottom:1px dashed #a9d6ff; cursor:pointer; }
.auth-terms a:hover{ color:#0f3c8a; border-bottom-color:#2f7cff; }

input, textarea, select{
    width:100%; padding:0 15px; margin:8px 0; border-radius:14px;
    border:1px solid #ccc; background:white; font-size:15px;
    transition:.2s; font-family:inherit; color:#1a2332;
}
input, select{ height:48px; }
textarea{ padding:12px 15px; resize:vertical; }
input:focus, textarea:focus, select:focus{
    outline:none; border-color:#369cff; box-shadow:0 0 12px rgba(0,140,255,.45);
}

.main-button{ height:50px; padding:0 25px; border-radius:16px;
    border:1px solid #999; cursor:pointer;
    background:linear-gradient(145deg,#fafafa,#b4bbc3);
    color:#222; font-weight:700; font-size:15px;
    box-shadow:inset 0 3px 6px white, 0 7px 15px rgba(0,0,0,.25); transition:.25s; }
.main-button:hover{ transform:translateY(-3px);
    background:linear-gradient(145deg,#fff,#9ed0ff); color:#004d99;
    box-shadow:0 0 18px rgba(0,140,255,.7), 0 10px 20px rgba(0,0,0,.3); }
.main-button:active{ transform:translateY(0);
    box-shadow:inset 0 3px 6px rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.2); }
.main-button.secondary{ background:linear-gradient(145deg,#f0f3f7,#d4dae3); color:#4a5568; }
.main-button.danger{ background:linear-gradient(145deg,#fde8e8,#f4b8b8); color:#8a1717; border-color:#e0a0a0; }
.main-button:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.main-button.small{ height:38px; padding:0 14px; font-size:13px; border-radius:12px; }

.topbar{ height:92px; display:flex; justify-content:space-between; align-items:center;
    padding:0 28px; background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    border-bottom:1px solid #e6eaf1;
    box-shadow:0 1px 0 rgba(255,255,255,1) inset, 0 4px 20px rgba(40,70,120,.08); }

.brand{ display:flex; align-items:center; gap:16px;
    padding:4px 20px 4px 6px; border-radius:18px;
    background:linear-gradient(135deg,#ffffff 0%,#f4f8ff 100%);
    box-shadow:inset 0 1px 0 #fff, 0 6px 22px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.05);
    border:1px solid #eaeef6;
    position:relative;
    transition:transform .2s ease, box-shadow .25s ease; }
.brand:hover{ transform:translateY(-1px);
    box-shadow:inset 0 1px 0 #fff, 0 10px 28px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.08); }

.brand-logo{
    position:relative;
    width:68px; height:68px;
    border-radius:16px;
    background:#000;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.9),
        0 8px 20px rgba(0,0,0,.35),
        0 0 40px rgba(0,0,0,.20);
    transition:transform .25s ease;
}
.brand:hover .brand-logo{ transform:scale(1.03); }
.brand-logo::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), transparent 60%);
    pointer-events:none;
}
.brand-logo svg{ width:88%; height:88%; display:block; }

.brand-text{ display:flex; flex-direction:column; justify-content:center; line-height:1; min-width:0; }
.brand-name{ display:flex; align-items:baseline; gap:6px;
    margin:0 0 6px 0; font-size:23px; font-weight:900;
    letter-spacing:1.2px; text-transform:uppercase;
    line-height:1; white-space:nowrap; color:#0a1226;
    text-shadow:0 1px 0 rgba(255,255,255,.9);
    font-family:"Segoe UI", Arial, sans-serif; }
.brand-name span{ background:linear-gradient(135deg,#2f7cff 0%,#1b4aa8 70%,#0a1f52 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:#1b4aa8; font-weight:900;
    letter-spacing:1.2px; }
.brand-sub{ display:inline-flex; align-items:center; gap:6px;
    align-self:flex-start; padding:3px 10px 3px 8px; border-radius:6px;
    background:linear-gradient(135deg,#eaf3ff 0%,#d6e6ff 100%);
    border:1px solid #c7dcff; color:#1b4aa8;
    font-size:10px; font-weight:900; letter-spacing:2px;
    text-transform:uppercase;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(47,124,255,.15);
    line-height:1; }
.brand-sub::before{ content:""; display:inline-block; width:6px; height:6px;
    border-radius:50%; background:linear-gradient(145deg,#4a96ff,#1b4aa8);
    box-shadow:0 0 8px rgba(47,124,255,.7);
    animation:brandDot 1.6s ease-in-out infinite; }
@keyframes brandDot{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.5; transform:scale(.85); }
}

.top-profile{ display:flex; align-items:center; gap:15px; }
.top-profile img{ width:55px; height:55px; border-radius:50%; object-fit:cover;
    border:3px solid white; box-shadow:0 5px 15px rgba(0,0,0,.3); background:#eef2f8; }

.layout{ display:flex; min-height:calc(100vh - 92px); }
.sidebar{ width:270px; background:linear-gradient(180deg,#f1f3f6,#d8dce2);
    padding:20px; box-shadow:5px 0 25px rgba(0,0,0,.15); }
.menu-title{ margin:20px 10px 10px; color:#777; font-size:12px;
    font-weight:900; letter-spacing:2px; }
.menu-button{ width:100%; height:52px; margin-bottom:14px; border-radius:16px;
    border:1px solid #999; cursor:pointer; font-size:15px; font-weight:700;
    background:linear-gradient(145deg,#fafafa,#b5bbc2);
    box-shadow:inset 0 3px 5px white, 0 6px 12px rgba(0,0,0,.25);
    transition:.25s; text-align:left; padding:0 16px; }
.menu-button:hover, .menu-button.active{
    transform:translateY(-3px);
    background:linear-gradient(145deg,#fff,#a9d6ff);
    color:#004d99;
    box-shadow:0 0 20px rgba(140,200,255,.7), 0 8px 18px rgba(0,0,0,.3); }
.logout{ margin-top:40px; }
.content{ flex:1; padding:35px; min-width:0; }
.page{ display:none; }
.page.active{ display:block; }
.content h1{ font-size:34px; margin-bottom:25px; }

.news-panel, .empty-card, .chat-box, .profile-card,
.rooms-panel, .video-panel{
    background:white; border-radius:25px; padding:30px;
    border:1px solid #eee; box-shadow:0 10px 35px rgba(0,0,0,.15); }

.view-head{ display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.view-head h1{ margin-bottom:0; }
.online-count-badge{ padding:6px 16px; border-radius:20px; font-weight:800;
    background:linear-gradient(145deg,#dff5e1,#a7e2ad);
    color:#155724; font-size:14px; }

.dash-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:14px; margin-bottom:24px; }
.dash-stat{ background:white; border:1px solid #eee; border-radius:20px;
    padding:22px; text-align:center;
    box-shadow:0 8px 22px rgba(0,0,0,.10); transition:.2s; }
.dash-stat:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(60,120,220,.18); }
.dash-stat-icon{ font-size:32px; margin-bottom:8px; }
.dash-stat-value{ font-size:30px; font-weight:900; color:#1a2332; }
.dash-stat-label{ font-size:12px; color:#7a849a; margin-top:4px;
    text-transform:uppercase; letter-spacing:.6px; font-weight:700; }
.dash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.dash-recent{ background:white; border-radius:25px; padding:30px;
    border:1px solid #eee; box-shadow:0 10px 35px rgba(0,0,0,.15); }
.dash-recent h2, .news-panel h2{ font-size:18px; margin-bottom:14px; color:#1a2332; }
.dash-recent-list{ display:flex; flex-direction:column; gap:10px;
    max-height:340px; overflow-y:auto; }
.dash-recent-item{ padding:10px 12px; background:#f8faff;
    border:1px solid #eaf0f9; border-radius:12px; font-size:13px; }
.dash-recent-item b{ color:#1b4aa8; }
.dash-recent-item .dash-recent-time{ color:#98a2b5; font-size:11px; margin-left:6px; }
.dash-recent-empty{ padding:30px; text-align:center; color:#98a2b5; font-size:13px;
    background:#fafcff; border:1px dashed #dfe7f2; border-radius:14px; }

.news-item{ padding:18px; border-left:4px solid #369cff;
    background:#f8faff; border-radius:12px; margin-bottom:14px; }
.news-item h3{ font-size:17px; margin-bottom:8px; color:#1a2332; }
.news-item p{ color:#5a6577; font-size:14px; line-height:1.5; }

.messages{ height:460px; overflow-y:auto; background:#f4f6f8;
    border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.chat-message{ display:flex; gap:10px; padding:8px 10px;
    border-radius:14px; transition:.15s; position:relative; }
.chat-message:hover{ background:#f8fbff; }
.chat-message.own{ background:linear-gradient(180deg,#eef4ff,#dfeaff); }
.chat-avatar{ width:38px; height:38px; border-radius:50%;
    background:#e3ecfb; color:#1b4aa8;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:15px; flex-shrink:0; overflow:hidden;
    border:2px solid white; box-shadow:0 3px 8px rgba(0,0,0,.08); }
.chat-avatar img{ width:100%; height:100%; object-fit:cover; }
.chat-body{ flex:1; min-width:0; }
.chat-head{ display:flex; align-items:baseline; gap:8px; }
.chat-head b{ color:#1b4aa8; font-size:14px; }
.chat-head .msg-time{ color:#98a2b5; font-size:11px; }
.chat-text{ color:#2a3446; font-size:14px; margin-top:2px;
    line-height:1.45; word-wrap:break-word; overflow-wrap:anywhere; }
.chat-delete{ position:absolute; top:6px; right:6px;
    width:26px; height:26px; border-radius:8px;
    background:#fff; border:1px solid #e6b3b3; color:#c33;
    cursor:pointer; font-size:14px; line-height:1;
    display:none; align-items:center; justify-content:center; }
.chat-message:hover .chat-delete{ display:flex; }
.chat-delete:hover{ background:#fde8e8; }
.chat-controls{ display:flex; gap:10px; margin-top:15px; }
.chat-controls input{ flex:1; margin:0; }

.conference-layout{ display:flex; gap:25px; align-items:flex-start; }
.rooms-panel{ width:340px; flex-shrink:0; }
.video-panel{ flex:1; min-width:0; }
.create-room-form{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px;
    padding:14px; background:#f8faff; border:1px solid #eaf0f9; border-radius:14px; }
.create-room-form input, .create-room-form select, .create-room-form textarea{ margin:0; height:42px; font-size:14px; }
.create-room-form button{ height:42px; font-size:14px; }
.room-card{ background:#f4f5f7; padding:18px; margin-bottom:15px;
    border-radius:18px; box-shadow:0 5px 12px rgba(0,0,0,.12); border:1px solid #e8edf5; }
.room-card h3{ font-size:16px; margin-bottom:6px; color:#1a2332; }
.room-card p{ font-size:13px; color:#6a7488; margin-bottom:6px; }
.room-card .main-button{ margin-top:10px; width:100%; height:42px; font-size:14px; }
.room-status{ min-height:20px; margin-bottom:10px; font-size:12.5px;
    color:#7a849a; font-weight:600; }
.room-status.err{ color:#c33; }
.room-status.ok{ color:#1e8f4a; }

.mirotalk-container{ width:100%; height:550px; border-radius:20px; overflow:hidden;
    background:#0f172a; margin:20px 0; position:relative; border:1px solid #334155; }
.mirotalk-container iframe{ width:100%; height:100%; border:0; display:block; }
.mirotalk-placeholder{ width:100%; height:100%; display:flex; flex-direction:column;
    align-items:center; justify-content:center; color:#8ba1c2; text-align:center; padding:40px; }
.mirotalk-placeholder-icon{ font-size:64px; margin-bottom:16px; opacity:.6; }
.mirotalk-placeholder p{ font-size:15px; max-width:320px; line-height:1.5; }
.room-controls{ display:flex; gap:10px; flex-wrap:wrap; margin-top:15px; }
.room-controls .main-button{ height:44px; font-size:14px; padding:0 18px; }

.add-game-panel{ background:white; border:1px solid #eee; border-radius:25px;
    padding:28px; margin-bottom:24px; box-shadow:0 10px 35px rgba(0,0,0,.15); }
.add-game-panel h2{ font-size:18px; margin-bottom:14px; color:#1a2332; }
.add-game-panel form{ display:flex; flex-direction:column; gap:14px; }
.game-icon-preview{ display:flex; align-items:center; gap:14px;
    padding:14px 16px; background:#f8faff; border:1px solid #eaf0f9; border-radius:14px; }
.game-icon-preview-img-wrap{ width:64px; height:64px; border-radius:14px;
    background:linear-gradient(145deg,#eaf2ff,#dfeaff);
    display:flex; align-items:center; justify-content:center;
    font-size:28px; overflow:hidden; flex-shrink:0;
    border:2px solid white; box-shadow:0 4px 12px rgba(60,120,220,.15); }
.game-icon-preview-img-wrap img{ width:100%; height:100%; object-fit:cover; }
.game-icon-preview-text{ font-size:13px; color:#7a849a; line-height:1.4; }
.game-icon-preview-text.ok{ color:#1e8f4a; font-weight:600; }
.game-icon-preview-text.err{ color:#c33; font-weight:600; }
.games-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.game-card{ background:white; border:1px solid #e8edf5; border-radius:20px;
    padding:18px; transition:.22s; position:relative;
    box-shadow:0 6px 18px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:12px; }
.game-card:hover{ transform:translateY(-4px); border-color:#cfdff9;
    box-shadow:0 12px 30px rgba(60,120,220,.18); }
.game-card-header{ display:flex; align-items:center; gap:14px; }
.game-card-icon{ width:64px; height:64px; border-radius:16px;
    background:linear-gradient(145deg,#eaf2ff,#dfeaff);
    display:flex; align-items:center; justify-content:center;
    font-size:28px; overflow:hidden; flex-shrink:0;
    border:2px solid white; box-shadow:0 4px 12px rgba(60,120,220,.15); }
.game-card-icon img{ width:100%; height:100%; object-fit:cover; }
.game-card-title{ font-size:16px; font-weight:800; color:#1a2332;
    word-break:break-word; line-height:1.3; }
.game-card-desc{ font-size:13px; color:#6a7488; line-height:1.45; min-height:36px; }
.game-card-actions{ display:flex; gap:8px; flex-wrap:wrap;
    padding-top:10px; border-top:1px solid #eef2f8; }
.game-card-actions .main-button{ flex:1; height:38px; font-size:13px; padding:0 12px; border-radius:12px; }
.game-delete{ position:absolute; top:10px; right:10px;
    width:28px; height:28px; border-radius:10px;
    background:#fff; border:1px solid #e6b3b3; color:#c33;
    cursor:pointer; font-size:16px; line-height:1;
    display:none; align-items:center; justify-content:center; z-index:2; }
.game-card:hover .game-delete{ display:flex; }
.game-delete:hover{ background:#fde8e8; }

.guilds-game-filter{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.guild-filter-chip{ padding:8px 16px; border-radius:20px; cursor:pointer;
    background:white; border:1px solid #dde6f3; color:#4a5568;
    font-size:13px; font-weight:700; transition:.2s;
    display:flex; align-items:center; gap:6px; }
.guild-filter-chip:hover{ border-color:#a9d6ff; color:#004d99;
    transform:translateY(-2px); box-shadow:0 6px 14px rgba(60,120,220,.15); }
.guild-filter-chip.active{ background:linear-gradient(145deg,#f0f6ff,#e0eeff);
    border-color:#9dccff; color:#1b4aa8; box-shadow:0 6px 14px rgba(60,120,220,.20); }
.guild-filter-chip img{ width:20px; height:20px; border-radius:5px; object-fit:cover; }
.guilds-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.guild-card{ background:white; border:1px solid #e8edf5; border-radius:20px;
    padding:18px; cursor:pointer; transition:.22s;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    display:flex; gap:14px; align-items:flex-start; }
.guild-card:hover{ transform:translateY(-4px); border-color:#cfdff9;
    box-shadow:0 12px 30px rgba(60,120,220,.18); }
.guild-card-icon{ width:56px; height:56px; border-radius:16px; flex-shrink:0;
    background:linear-gradient(145deg,#eaf2ff,#dfeaff);
    display:flex; align-items:center; justify-content:center;
    font-size:26px; overflow:hidden;
    border:2px solid white; box-shadow:0 4px 12px rgba(60,120,220,.15); }
.guild-card-icon img{ width:100%; height:100%; object-fit:cover; }
.guild-card-body{ flex:1; min-width:0; }
.guild-card h3{ font-size:16px; margin-bottom:4px; color:#1a2332; word-break:break-word; }
.guild-card p{ font-size:12.5px; color:#7a849a; margin-bottom:8px; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.guild-meta{ display:flex; gap:10px; font-size:11.5px; color:#6a7488;
    font-weight:600; flex-wrap:wrap; align-items:center; }
.guild-meta .joined-badge{ color:#155724; background:#dff5e1; padding:2px 8px; border-radius:10px; }
.guild-meta .pending-badge{ color:#8a6a10; background:#fff4d6; padding:2px 8px; border-radius:10px; }
.guild-game-badge{ display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px; border-radius:12px;
    background:#eef4ff; color:#1b4aa8; font-size:11px; font-weight:800; }
.guild-game-badge img{ width:14px; height:14px; border-radius:3px; object-fit:cover; }

/* GUILD OVERLAY */
.guild-overlay{ position:fixed; inset:0; z-index:900;
    background:linear-gradient(180deg,#f4f7fb,#e9eef6);
    display:flex; flex-direction:column; overflow:hidden;
    animation:gov-in .22s ease; }
@keyframes gov-in{ from{ transform:translateY(30px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.guild-overlay-header{ height:72px; flex-shrink:0;
    background:white; border-bottom:1px solid #e6eaf1;
    display:flex; align-items:center; gap:16px;
    padding:0 24px; box-shadow:0 2px 12px rgba(40,70,120,.08); }
.guild-overlay-back{ height:42px; padding:0 18px; border-radius:12px;
    border:1px solid #cfd6e0;
    background:linear-gradient(180deg,#ffffff,#eef1f6);
    color:#2a3446; font-weight:700; font-size:14px;
    cursor:pointer; transition:.2s;
    box-shadow:inset 0 1px 0 #fff, 0 3px 0 #c4ccd8, 0 4px 10px rgba(40,60,90,.10); }
.guild-overlay-back:hover{ color:#1b57c8; border-color:#b9c8e6;
    box-shadow:inset 0 1px 0 #fff, 0 3px 0 #b9c5d8, 0 6px 12px rgba(60,120,220,.22);
    transform:translateY(-1px); }
.guild-overlay-header-title{ flex:1; font-size:17px; font-weight:800; color:#1a2332;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.guild-overlay-header-actions{ display:flex; gap:8px; }
.guild-overlay-header-actions .main-button{ height:42px; padding:0 18px; font-size:13.5px; border-radius:12px; }
.guild-overlay-body{ flex:1; overflow-y:auto; padding:26px;
    display:flex; flex-direction:column; gap:20px;
    max-width:1180px; width:100%; margin:0 auto; }
.guild-hero{ background:white; border-radius:22px; padding:24px;
    border:1px solid #e9eef5; box-shadow:0 10px 30px rgba(40,70,120,.10);
    display:flex; gap:22px; align-items:flex-start; }
.guild-hero-icon{ position:relative; width:110px; height:110px; border-radius:24px; flex-shrink:0;
    background:linear-gradient(145deg,#eaf2ff,#dfeaff);
    display:flex; align-items:center; justify-content:center;
    font-size:52px; overflow:hidden;
    border:3px solid white; box-shadow:0 10px 24px rgba(60,120,220,.20); }
.guild-hero-icon img{ width:100%; height:100%; object-fit:cover; }
.guild-hero-icon-edit{ position:absolute; bottom:-8px; right:-8px;
    width:38px; height:38px; border-radius:50%;
    background:linear-gradient(145deg,#fff,#d0dae8);
    border:2px solid white; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; box-shadow:0 4px 12px rgba(0,0,0,.18); transition:.2s; }
.guild-hero-icon-edit:hover{ transform:scale(1.08);
    background:linear-gradient(145deg,#fff,#a9d6ff); }
.guild-hero-info{ flex:1; min-width:0; }
.guild-hero-info h1{ font-size:26px; color:#1a2332; margin-bottom:8px;
    word-break:break-word; line-height:1.2; }
.guild-hero-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.guild-hero-desc{ color:#5a6577; font-size:14.5px; line-height:1.55;
    margin-bottom:14px; word-wrap:break-word; }
.guild-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.guild-hero-actions .main-button{ height:44px; font-size:14px; padding:0 18px; }

.guild-tabs{ display:flex; gap:6px; background:#eef2f8; padding:6px;
    border-radius:14px; align-self:flex-start; flex-wrap:wrap; }
.guild-tab-btn{ min-width:160px; height:44px; border-radius:10px; border:none;
    cursor:pointer; background:transparent; color:#5a6577;
    font-weight:700; font-size:14px; transition:.2s; padding:0 18px; }
.guild-tab-btn.active{ background:white; color:#1b4aa8;
    box-shadow:0 2px 8px rgba(60,120,220,.15); }
.guild-tab-panel{ background:white; border-radius:22px; padding:24px;
    border:1px solid #e9eef5; box-shadow:0 10px 30px rgba(40,70,120,.10); }
.guild-tab-content{ display:none; }
.guild-tab-content.active{ display:block; }

.guild-pending-section{ padding:14px 16px; background:#fff8e6;
    border:1px solid #f4dca0; border-radius:14px; margin-bottom:18px; }
.guild-pending-title{ font-size:13px; font-weight:800; color:#8a6a10;
    text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px; }
.guild-pending-item{ display:flex; align-items:center; gap:10px;
    padding:8px 10px; background:white; border-radius:10px; margin-bottom:8px; }
.guild-pending-item:last-child{ margin-bottom:0; }
.guild-pending-name{ flex:1; font-weight:700; font-size:13.5px; color:#1a2332; }
.guild-pending-item .main-button{ height:34px; font-size:12.5px; padding:0 12px; }

.guild-members-list{ display:flex; flex-direction:column; gap:10px; }
.guild-member-row{ display:flex; align-items:center; gap:12px;
    padding:12px 14px; background:#f8faff;
    border:1px solid #eaf0f9; border-radius:14px; }
.guild-member-avatar{ width:44px; height:44px; border-radius:50%;
    background:#e3ecfb; color:#1b4aa8;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:17px; overflow:hidden; flex-shrink:0;
    border:2px solid white; box-shadow:0 3px 8px rgba(0,0,0,.08); }
.guild-member-avatar img{ width:100%; height:100%; object-fit:cover; }
.guild-member-info{ flex:1; min-width:0; }
.guild-member-name{ font-weight:700; font-size:14.5px; color:#1a2332; }
.guild-member-role{ font-size:11.5px; margin-top:2px; font-weight:700; }
.guild-member-role.owner{ color:#b9830a; }
.guild-member-role.deputy{ color:#1b4aa8; }
.guild-member-role.member{ color:#7a849a; }
.guild-member-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.guild-member-actions .main-button{ height:34px; font-size:12px; padding:0 12px; border-radius:10px; }

.material-upload-form{ padding:18px; background:#f8faff;
    border:1px solid #eaf0f9; border-radius:16px; margin-bottom:18px; }
.material-upload-form h3{ font-size:14px; margin-bottom:12px; color:#1a2332; }
.material-form-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.material-form-row > *{ flex:1; min-width:200px; margin:0; }
.material-file-input{
    padding:12px 16px; border-radius:12px; border:1px dashed #a9d6ff;
    background:#fff; cursor:pointer; font-size:13.5px;
    display:flex; align-items:center; gap:10px; transition:.2s; }
.material-file-input:hover{ border-color:#369cff; background:#f6faff; }
.material-file-input input[type="file"]{ display:none; }
.material-file-input .file-text{ color:#5a6577; }
.material-file-input .file-text b{ color:#1b4aa8; }

.upload-progress{ margin-top:8px; height:6px; border-radius:6px;
    background:#e3e9f2; overflow:hidden; }
.upload-progress-bar{ height:100%;
    background:linear-gradient(90deg,#9dccff,#369cff);
    width:0%; transition:width .2s; }

.materials-board{ display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.material-btn{ display:flex; align-items:center;
    padding:16px 18px; border-radius:16px;
    border:1px solid #cfd6e0; cursor:pointer; text-align:left;
    background:linear-gradient(180deg,#ffffff 0%,#eef1f6 55%,#dde3ec 100%);
    color:#2a3446; position:relative; overflow:hidden; font-family:inherit;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),
        0 1px 2px rgba(40,60,90,0.10),
        0 3px 0 #c4ccd8,
        0 4px 10px rgba(40,60,90,0.10);
    transition:transform .15s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease; }
.material-btn::after{ content:""; position:absolute; top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(90,150,255,0.28), transparent);
    transform:skewX(-18deg); opacity:0;
    transition:opacity .25s ease, left .55s ease; }
.material-btn:hover::after{ opacity:1; left:130%; }
.material-btn:hover{ color:#1b57c8; border-color:#b9c8e6; transform:translateY(-3px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),
        0 1px 2px rgba(40,60,90,0.12),
        0 4px 0 #b9c5d8,
        0 8px 18px rgba(60,120,220,0.24); }
.material-btn-body{ flex:1; min-width:0; }
.material-btn-title{ font-weight:800; font-size:14.5px; color:inherit;
    word-break:break-word; line-height:1.3; margin-bottom:3px; }
.material-btn-meta{ font-size:11.5px; color:#7a849a; font-weight:600;
    word-break:break-word; line-height:1.3; }
.material-btn-delete{ position:absolute; top:8px; right:8px;
    width:26px; height:26px; border-radius:8px;
    background:#fff; border:1px solid #e6b3b3; color:#c33;
    cursor:pointer; font-size:14px; line-height:1;
    display:none; align-items:center; justify-content:center; z-index:2; }
.material-btn:hover .material-btn-delete{ display:flex; }
.material-btn-delete:hover{ background:#fde8e8; }

.tpl-ai-hint{ display:flex; gap:16px;
    padding:16px 18px;
    background:linear-gradient(135deg,#f0f7ff 0%,#e8f3ff 100%);
    border:1px solid #cfdff9; border-radius:16px; margin-bottom:18px; }
.tpl-ai-hint-icon{ font-size:32px; flex-shrink:0;
    width:52px; height:52px; display:flex; align-items:center; justify-content:center;
    background:white; border-radius:14px; box-shadow:0 6px 16px rgba(60,120,220,.15); }
.tpl-ai-hint-body{ flex:1; min-width:0; }
.tpl-ai-hint-title{ font-size:14px; font-weight:800; color:#1b4aa8; margin-bottom:5px; }
.tpl-ai-hint-text{ font-size:12.5px; color:#4a648f; line-height:1.5; margin-bottom:10px; }
.tpl-ai-prompt{ padding:12px 14px; background:white;
    border:1px solid #cfdff9; border-left:4px solid #2f7cff;
    border-radius:10px; font-family:Consolas, Monaco, monospace;
    font-size:12px; color:#2a3446; line-height:1.5;
    margin-bottom:10px; word-wrap:break-word; }

.templates-grid{ display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.tpl-card{ background:#f8faff; border:1px solid #eaf0f9;
    border-radius:16px; padding:16px;
    display:flex; flex-direction:column; gap:10px;
    transition:.2s; position:relative; }
.tpl-card:hover{ transform:translateY(-3px); border-color:#cfdff9;
    box-shadow:0 10px 24px rgba(60,120,220,.15); }
.tpl-card-title{ font-size:15px; font-weight:800; color:#1a2332;
    line-height:1.3; word-break:break-word; padding-right:24px; }
.tpl-card-desc{ font-size:12.5px; color:#6a7488; line-height:1.5;
    min-height:34px;
    display:-webkit-box; -webkit-line-clamp:3;
    -webkit-box-orient:vertical; overflow:hidden; }
.tpl-card-meta{ font-size:11px; color:#98a2b5;
    display:flex; justify-content:space-between; gap:8px;
    padding-top:8px; border-top:1px solid #e6ecf4; }
.tpl-card-actions{ display:flex; gap:8px; }
.tpl-card-actions .main-button{ flex:1; height:38px; font-size:13px; padding:0 14px; border-radius:11px; }
.tpl-delete{ position:absolute; top:10px; right:10px;
    width:26px; height:26px; border-radius:9px;
    background:#fff; border:1px solid #e6b3b3; color:#c33;
    cursor:pointer; font-size:14px; line-height:1;
    display:none; align-items:center; justify-content:center; z-index:2; }
.tpl-card:hover .tpl-delete{ display:flex; }
.tpl-delete:hover{ background:#fde8e8; }

/* EDITOR */
.template-viewer{
    position:fixed; inset:0; z-index:1100;
    background:rgba(15,25,45,.88);
    backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    animation:fade-in .18s ease;
}
@keyframes fade-in{ from{opacity:0} to{opacity:1} }

.template-viewer-window{
    width:100%; max-width:1500px;
    height:100%; max-height:920px;
    background:#eef2f8;
    border-radius:20px;
    display:flex; flex-direction:column;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    border:1px solid #cfd6e0;
}

.template-viewer-header{
    min-height:64px; flex-shrink:0;
    display:flex; align-items:center; gap:14px;
    padding:12px 22px;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid #e6eaf1;
    flex-wrap:wrap;
}
.template-viewer-title{ flex:1; min-width:200px; }
.template-viewer-title-main{
    font-weight:800; color:#1a2332; font-size:16px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.template-viewer-title-sub{
    font-size:12px; color:#7a849a; margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.template-viewer-actions{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.tpl-mode-badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; border-radius:12px;
    background:#f0f3f7; border:1px solid #d4dae3;
    color:#4a5568; font-size:12px; font-weight:700;
}
.tpl-mode-badge.editing{
    background:#e6f7ec; border-color:#a7e2ad;
    color:#155724;
}
.template-viewer-actions .main-button{
    height:40px; padding:0 16px; font-size:13px; border-radius:12px;
}

.editor-tabs{
    display:flex; gap:6px;
    padding:8px 16px 0;
    background:white;
    border-bottom:1px solid #e6eaf1;
    flex-shrink:0;
    flex-wrap:wrap;
}
.editor-tab-btn{
    height:44px; padding:0 22px;
    border:none; border-radius:12px 12px 0 0;
    background:transparent;
    color:#5a6577;
    font-weight:700; font-size:13.5px;
    cursor:pointer;
    transition:.2s;
    border-bottom:3px solid transparent;
    margin-bottom:-1px;
}
.editor-tab-btn:hover{ color:#1b4aa8; background:#f5f9ff; }
.editor-tab-btn.active{
    color:#1b4aa8;
    border-bottom-color:#2f7cff;
    background:#f5f9ff;
}

.editor-toolbar{
    min-height:52px; flex-shrink:0;
    padding:8px 16px;
    background:linear-gradient(180deg,#fbfdff,#f0f5fb);
    border-bottom:1px solid #e6eaf1;
    display:flex; gap:6px; flex-wrap:wrap; align-items:center;
}
.tb-btn{
    height:36px; min-width:36px;
    padding:0 10px;
    border-radius:10px;
    border:1px solid #cfd6e0;
    background:white;
    color:#2a3446;
    cursor:pointer;
    font-weight:700;
    font-size:13px;
    transition:.15s;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.tb-btn:hover{
    background:linear-gradient(180deg,#fff,#e0eeff);
    border-color:#a9d6ff; color:#1b4aa8;
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(60,120,220,.15);
}
.tb-btn:active{ transform:translateY(0); }
.tb-btn.tb-primary{ color:#1b4aa8; border-color:#a9d6ff; }
.tb-btn.tb-danger{ color:#8a1717; border-color:#e0a0a0; }
.tb-sep{ width:1px; height:26px; background:#d5dbe5; margin:0 4px; }

.editor-body{
    flex:1; min-height:0;
    padding:14px;
    display:flex;
    overflow:hidden;
}
.editor-pane{
    flex:1;
    display:none;
    min-width:0; min-height:0;
    border-radius:14px;
    overflow:hidden;
    border:1px solid #e6eaf1;
    box-shadow:0 6px 18px rgba(40,70,120,.10);
    background:white;
}
.editor-pane.active{ display:flex; flex-direction:column; }

.visual-editor-wrap{
    flex:1;
    overflow:auto;
    padding:18px;
    background:#f4f6fa;
    display:flex; justify-content:center;
}
.visual-editor{
    width:100%; max-width:900px;
    min-height:400px;
    background:white;
    border-radius:8px;
    padding:24px;
    box-shadow:0 8px 24px rgba(40,70,120,.10);
    font-family:"Segoe UI", Arial, sans-serif;
    font-size:14px;
    line-height:1.5;
    color:#1a2332;
    outline:none;
    transition:.15s;
}
.visual-editor[contenteditable="true"]:focus{
    box-shadow:0 8px 24px rgba(40,70,120,.10), 0 0 0 3px rgba(90,150,255,.18);
}
.visual-editor[contenteditable="false"]{
    cursor:not-allowed;
    background:#fbfcfe;
}
.visual-editor table{
    border-collapse:collapse;
    width:100%;
    font-size:14px;
    margin:8px 0;
}
.visual-editor th,
.visual-editor td{
    border:1px solid #d8e0ee;
    padding:8px 10px;
    text-align:left;
    vertical-align:top;
    min-width:60px;
}
.visual-editor th{
    background:#2f7cff;
    color:#fff;
    font-weight:700;
}
.visual-editor tr:nth-child(even) td{ background:#f8faff; }
.visual-editor .num{ width:30px; text-align:center; color:#98a2b5; font-weight:700; }
.visual-editor .nick{ font-weight:700; }
.visual-editor .guild{ color:#4a5568; }
.visual-editor .faction-cell{ color:#fff; font-weight:700; text-align:center; padding:6px 10px; white-space:nowrap; }
.visual-editor .f-england{ background:#a31c1c; }
.visual-editor .f-france{ background:#1c3fa3; }
.visual-editor .f-spain{ background:#a37212; }
.visual-editor .f-holland{ background:#a35712; }
.visual-editor .f-portugal{ background:#12663a; }
.visual-editor .f-pirates{ background:#2a2a2a; }
.visual-editor h1, .visual-editor h2, .visual-editor h3{ margin:12px 0 8px; }
.visual-editor p{ margin:8px 0; }
.visual-editor ul, .visual-editor ol{ margin:8px 0 8px 22px; }
.visual-editor img{
    max-width:100%; height:auto;
    border-radius:8px; margin:6px 0;
    box-shadow:0 4px 12px rgba(40,70,120,.10);
}

.editor-pane-code textarea{
    flex:1;
    width:100%;
    padding:16px 18px;
    margin:0;
    border:0;
    border-radius:0;
    font-family:"Consolas", "Menlo", "Monaco", monospace;
    font-size:12.5px;
    line-height:1.6;
    color:#1a2332;
    background:#fbfdff;
    resize:none;
    outline:none;
    tab-size:2;
    white-space:pre;
    overflow:auto;
}
.editor-pane-code textarea:focus{ background:#fff; }
.editor-pane-code textarea[readonly]{ background:#f4f6f8; color:#4a5568; cursor:not-allowed; }

.editor-pane-import.active{
    display:flex;
    flex-direction:column;
    background:#f4f6fa;
    overflow:hidden;
}
.import-pane{
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
    padding:20px;
    gap:14px;
    overflow:hidden;
}
.import-mode-switch{
    display:flex;
    gap:6px;
    padding:5px;
    background:#eef2f8;
    border-radius:12px;
    flex-shrink:0;
}
.import-mode-btn{
    flex:1;
    height:42px;
    border:none;
    border-radius:9px;
    background:transparent;
    color:#5a6577;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    transition:.15s;
}
.import-mode-btn:hover{ color:#1b4aa8; background:#f5f9ff; }
.import-mode-btn.active{
    background:white;
    color:#1b4aa8;
    box-shadow:0 2px 8px rgba(60,120,220,.15);
}

.import-url-row{
    display:flex;
    gap:10px;
    flex-shrink:0;
}
.import-url-row input{
    flex:1;
    height:48px;
    margin:0;
    border-radius:12px;
    border:1px solid #cfd6e0;
    background:white;
    padding:0 15px;
    font-size:14px;
    color:#1a2332;
}
.import-url-row input:focus{
    outline:none;
    border-color:#7aa8f0;
    box-shadow:0 0 0 4px rgba(90,150,255,.15);
}
.import-url-row .main-button{
    height:48px;
    padding:0 22px;
    font-size:14px;
    border-radius:12px;
    flex-shrink:0;
}
.import-hint{
    font-size:12.5px;
    color:#4a648f;
    line-height:1.5;
    padding:10px 14px;
    background:linear-gradient(135deg,#f0f7ff 0%,#e8f3ff 100%);
    border:1px solid #cfdff9;
    border-radius:10px;
    flex-shrink:0;
    margin-top:10px;
}
#import-html{
    min-height:180px;
    max-height:280px;
    padding:14px 16px;
    margin:10px 0 0;
    border-radius:12px;
    border:1px solid #cfd6e0;
    background:white;
    font-family:Consolas,Monaco,monospace;
    font-size:12px;
    line-height:1.5;
    color:#1a2332;
    resize:vertical;
    width:100%;
}
#import-html:focus{
    outline:none;
    border-color:#7aa8f0;
    box-shadow:0 0 0 4px rgba(90,150,255,.15);
}
.import-status{
    font-size:13px;
    font-weight:600;
    color:#7a849a;
    min-height:18px;
    flex-shrink:0;
    margin-top:4px;
}
.import-status.ok{ color:#1e8f4a; }
.import-status.err{ color:#c33; }
.import-status.loading{ color:#7a849a; }

.import-results{
    flex:1;
    overflow-y:auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:16px;
    padding-right:4px;
}
.import-section{ display:flex; flex-direction:column; gap:10px; }
.import-section-title{
    font-size:12px;
    font-weight:800;
    color:#5a6577;
    letter-spacing:.5px;
    text-transform:uppercase;
    padding:4px 2px;
}
.import-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:12px;
}
.import-grid-images{
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}
.import-card{
    display:flex;
    gap:10px;
    padding:12px;
    background:white;
    border:1px solid #dde6f3;
    border-radius:14px;
    cursor:pointer;
    transition:.15s;
    align-items:flex-start;
    user-select:none;
}
.import-card:hover{
    border-color:#a9d6ff;
    box-shadow:0 6px 14px rgba(60,120,220,.12);
}
.import-card:has(.import-check:checked){
    border-color:#2f7cff;
    background:linear-gradient(180deg,#f7faff,#eaf3ff);
    box-shadow:0 6px 14px rgba(60,120,220,.20);
}
.import-check{
    width:20px;
    height:20px;
    margin:2px 0 0;
    flex-shrink:0;
    accent-color:#2f7cff;
    cursor:pointer;
}
.import-card-body{ flex:1; min-width:0; }
.import-card-title{
    font-size:13.5px;
    font-weight:800;
    color:#1a2332;
    line-height:1.3;
    word-break:break-word;
    margin-bottom:4px;
}
.import-card-meta{
    font-size:11px;
    color:#98a2b5;
    word-break:break-all;
    margin-bottom:6px;
}
.import-card-preview{
    font-size:11.5px;
    color:#7a849a;
    line-height:1.4;
    background:#f8faff;
    border:1px solid #eaf0f9;
    border-radius:8px;
    padding:6px 10px;
    font-family:Consolas,Monaco,monospace;
    max-height:60px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.import-card-image .import-card-body{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.import-card-image img{
    width:100%;
    height:100px;
    object-fit:cover;
    border-radius:8px;
    background:#eef2f8;
    border:1px solid #eaf0f9;
}
.import-card-image .import-card-title{
    font-size:12.5px;
    margin-bottom:0;
}
.import-card-image .import-card-meta{
    font-size:10.5px;
    margin-bottom:0;
}

.import-footer{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 16px;
    background:white;
    border:1px solid #e6eaf1;
    border-radius:14px;
    box-shadow:0 4px 12px rgba(40,70,120,.06);
}
.import-counter{
    font-size:13px;
    font-weight:700;
    color:#4a5568;
}
.import-footer-actions{ display:flex; gap:8px; }
.import-footer-actions .main-button{
    height:42px;
    padding:0 18px;
    font-size:13.5px;
    border-radius:12px;
}

.editor-status-bar{
    min-height:28px; flex-shrink:0;
    padding:6px 20px;
    background:rgba(255,255,255,.9);
    border-top:1px solid #e6eaf1;
    font-size:12px;
    color:#7a849a;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
}
.editor-status-bar .ok{ color:#1e8f4a; font-weight:700; }
.editor-status-bar .dirty{ color:#c98a0a; font-weight:700; }
.editor-status-bar .err{ color:#c33; font-weight:700; }

/* FILE VIEWER */
.file-viewer{
    position:fixed; inset:0; z-index:1050;
    background:rgba(15,25,45,.85);
    backdrop-filter:blur(6px);
    display:flex; flex-direction:column;
    animation:fade-in .18s ease;
}
.file-viewer-header{
    height:64px; flex-shrink:0;
    display:flex; align-items:center; gap:14px;
    padding:0 22px;
    background:rgba(255,255,255,.95);
    border-bottom:1px solid #e6eaf1;
}
.file-viewer-title{
    flex:1; font-weight:800; color:#1a2332;
    font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.file-viewer-actions{ display:flex; gap:8px; }
.file-viewer-actions .main-button{ height:40px; padding:0 16px; font-size:13px; border-radius:12px; }
.file-viewer-body{
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:20px; overflow:auto;
}
.file-viewer-body img,
.file-viewer-body video{ max-width:100%; max-height:100%;
    border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.file-viewer-body audio{ width:min(600px, 100%); }
.file-viewer-body iframe{ width:100%; height:100%; border:0; background:white; border-radius:12px; }
.file-viewer-body .viewer-fallback{ color:#fff; text-align:center; padding:40px; }
.file-viewer-body .viewer-fallback .big{ font-size:72px; margin-bottom:16px; display:block; }
.file-viewer-body .viewer-fallback p{ color:#cbd5e1; margin-bottom:20px; }

/* PROFILE */
.profile-card{ max-width:520px; text-align:center; }
.profile-avatar-wrap{ position:relative; width:150px; height:150px; margin:0 auto; }
.profile-card img#profile-avatar{
    width:150px; height:150px; border-radius:50%; object-fit:cover;
    box-shadow:0 10px 25px rgba(0,0,0,.3); background:#eef2f8;
    border:4px solid white;
}
#vip-level, #side-vip{ display:inline-block; padding:8px 18px; border-radius:20px;
    margin:15px; font-weight:900; font-size:13px;
    background:linear-gradient(145deg,#ffe97a,#d79b00); }
.admin-badge{
    display:inline-block; padding:8px 18px; border-radius:20px;
    margin:0 15px 15px; font-weight:900; font-size:13px;
    background:linear-gradient(145deg,#ffd6ff,#c47aff);
    color:#3b0060; letter-spacing:.5px;
}
.profile-id{ display:flex; flex-direction:column; gap:4px;
    padding:10px 14px; background:#f8fafc; border:1px solid #eaf0f9;
    border-radius:12px; font-size:11px; color:#6a7488;
    margin:12px 0 18px; text-align:left; }
.profile-id > span{ text-transform:uppercase; letter-spacing:.8px;
    font-weight:800; color:#8a94a8; }
.profile-id code{ font-family:"Consolas", "Menlo", monospace;
    color:#1b4aa8; font-size:11px; word-break:break-all; }
.schema-warning{ padding:12px 14px; background:#fff8e6; border:1px solid #f4dca0;
    border-radius:12px; font-size:12.5px; color:#8a6a10;
    text-align:left; margin-bottom:16px; line-height:1.5; }
.profile-form{ display:flex; flex-direction:column; gap:14px;
    text-align:left; margin-top:8px; }
.profile-field{ display:flex; flex-direction:column; gap:6px; }
.profile-field > span{ font-size:12px; font-weight:700; color:#5a6577;
    letter-spacing:.3px; text-transform:uppercase; }
.profile-field input, .profile-field textarea, .profile-field select{
    width:100%; margin:0; height:46px; padding:0 14px;
    border-radius:12px; border:1px solid #d5dbe5;
    background:#fbfcfe; font-size:14px; color:#1a2332; transition:.18s; }
.profile-field textarea{ height:auto; min-height:76px; padding:12px 14px;
    resize:vertical; line-height:1.45; }
.profile-field input:focus, .profile-field textarea:focus, .profile-field select:focus{
    outline:none; border-color:#369cff; background:#fff;
    box-shadow:0 0 12px rgba(0,140,255,.25); }
.field-hint{ font-size:11px; color:#98a2b5; line-height:1.4; }
.field-hint.ok{ color:#1e8f4a; font-weight:600; }
.field-hint.err{ color:#c33; font-weight:600; }
.field-hint.loading{ color:#7a849a; }
.profile-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.profile-actions{ display:flex; gap:10px; margin-top:4px; }
.profile-actions .main-button{ flex:1; height:46px; font-size:14px; }
.profile-status{ min-height:20px; margin-top:4px; font-size:13px; font-weight:600;
    text-align:center; color:#1e8f4a; }
.profile-status.err{ color:#c33; }
.profile-status.loading{ color:#7a849a; }

.rightbar{ width:300px; padding:25px; background:#fafafa; border-left:1px solid #ddd; }
.side-profile{ text-align:center; background:white; padding:25px;
    border-radius:25px; box-shadow:0 10px 25px rgba(0,0,0,.12); }
.side-profile img{ width:120px; height:120px; border-radius:50%; object-fit:cover;
    background:#eef2f8; border:3px solid white;
    box-shadow:0 6px 15px rgba(0,0,0,.15); }
.online-box{ margin-top:25px; padding:20px; background:white;
    border-radius:20px; box-shadow:0 8px 20px rgba(0,0,0,.12); font-size:14px; }
.online-dot{ display:inline-block; width:12px; height:12px;
    background:#00d000; border-radius:50%; margin-right:6px; vertical-align:middle; }

.online-list-page{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.online-user-card{ background:white; border:1px solid #e8edf5; border-radius:16px;
    padding:14px; display:flex; align-items:center; gap:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.06); transition:.18s; }
.online-user-card:hover{ transform:translateY(-2px); border-color:#cfdff9;
    box-shadow:0 8px 20px rgba(60,120,220,.15); }
.online-user-avatar{ width:44px; height:44px; border-radius:50%;
    background:#e3ecfb; color:#1b4aa8;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:16px; overflow:hidden;
    border:2px solid white; box-shadow:0 3px 8px rgba(0,0,0,.10); flex-shrink:0; }
.online-user-avatar img{ width:100%; height:100%; object-fit:cover; }
.online-user-name{ font-weight:700; color:#1a2332; font-size:14px; }
.online-user-meta{ font-size:11.5px; color:#8a94a8; margin-top:2px; }

/* ПРАВИЛА */
.rules-screen{
    position:fixed; inset:0; z-index:1500;
    background:linear-gradient(180deg,#f4f7fb,#e9eef6);
    display:flex; flex-direction:column; overflow:hidden;
    animation:rules-in .25s ease;
}
@keyframes rules-in{ from{ transform:translateY(20px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

.rules-screen-header{
    height:72px; flex-shrink:0;
    background:white; border-bottom:1px solid #e6eaf1;
    display:flex; align-items:center; gap:16px;
    padding:0 24px;
    box-shadow:0 2px 12px rgba(40,70,120,.08);
    position:relative; z-index:2;
}
.rules-screen-body{
    flex:1; overflow-y:auto;
    padding:26px;
}
.rules-screen-body .rules-layout{
    max-width:1180px;
    width:100%;
    margin:0 auto;
}

.rules-layout{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:24px;
    align-items:start;
}
.rules-toc{
    position:sticky;
    top:20px;
    background:white;
    border-radius:20px;
    padding:18px;
    border:1px solid #e9eef5;
    box-shadow:0 8px 24px rgba(40,70,120,.08);
    display:flex;
    flex-direction:column;
    gap:2px;
    max-height:calc(100vh - 130px);
    overflow-y:auto;
}
.rules-toc-title{
    font-size:11.5px;
    font-weight:800;
    color:#8a94a8;
    letter-spacing:.8px;
    text-transform:uppercase;
    margin-bottom:10px;
    padding:0 8px;
}
.rules-toc-link{
    display:block;
    padding:7px 10px;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
    color:#4a5568;
    text-decoration:none;
    transition:.15s;
    border-left:3px solid transparent;
}
.rules-toc-link.sub{
    padding-left:22px;
    font-weight:600;
    font-size:12.5px;
    color:#7a849a;
}
.rules-toc-link:hover{
    background:#f3f7ff;
    color:#1b4aa8;
    border-left-color:#a9d6ff;
}
.rules-body{
    background:white;
    border-radius:22px;
    padding:32px 36px;
    border:1px solid #e9eef5;
    box-shadow:0 10px 30px rgba(40,70,120,.08);
    color:#2a3446;
    font-size:14.5px;
    line-height:1.65;
}
.rules-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 16px;
    background:linear-gradient(135deg,#f0f7ff 0%,#e8f3ff 100%);
    border:1px solid #cfdff9;
    border-radius:14px;
    margin-bottom:26px;
    flex-wrap:wrap;
}
.rules-badge{
    font-size:12.5px;
    font-weight:700;
    color:#1b4aa8;
}
.rules-h1{
    font-size:22px;
    font-weight:800;
    color:#1a2332;
    margin:34px 0 16px;
    padding:14px 20px;
    border-left:5px solid #2f7cff;
    background:linear-gradient(90deg,#eff6ff 0%,transparent 100%);
    border-radius:8px;
    letter-spacing:-0.2px;
}
.rules-h1:first-of-type{ margin-top:0; }
.rules-h2{
    font-size:16.5px;
    font-weight:800;
    color:#1b4aa8;
    margin:22px 0 10px;
    letter-spacing:-0.1px;
}
.rules-body p{ margin:8px 0 12px; color:#3a4556; }
.rules-body p b{ color:#1a2332; }
.rules-body ul{ margin:8px 0 14px 0; padding-left:22px; }
.rules-body li{ margin:6px 0; color:#3a4556; }
.rules-body li b{ color:#1a2332; }
.rules-body a{
    color:#1b4aa8;
    text-decoration:none;
    border-bottom:1px dashed #a9d6ff;
    transition:.15s;
}
.rules-body a:hover{ color:#0f3c8a; border-bottom-color:#2f7cff; }
.rules-signature{
    margin-top:30px;
    padding-top:18px;
    border-top:1px solid #eef2f8;
    font-size:13px;
    color:#7a849a;
    text-align:right;
    line-height:1.8;
}

/* ============================================================
   MIT LICENSE — карточка и текст лицензии
============================================================ */

.license-card{
    display:flex; gap:16px; align-items:flex-start;
    padding:18px 20px;
    background:linear-gradient(135deg,#f0f7ff 0%,#e8f3ff 100%);
    border:1px solid #cfdff9;
    border-left:5px solid #2f7cff;
    border-radius:14px;
    margin:14px 0 22px;
}
.license-card-icon{
    width:52px; height:52px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:white; border-radius:14px;
    font-size:28px;
    box-shadow:0 6px 16px rgba(60,120,220,.15);
}
.license-card-body{ flex:1; min-width:0; }
.license-card-title{
    font-size:14.5px; font-weight:800; color:#1b4aa8; margin-bottom:6px;
    line-height:1.35;
}
.license-card-text{
    font-size:13px; color:#3a4556; line-height:1.55;
}

.license-pre{
    margin:10px 0 22px;
    padding:16px 18px;
    background:#0f172a;
    color:#e2e8f0;
    border-radius:12px;
    font-family:"Consolas","Menlo","Monaco",monospace;
    font-size:12px;
    line-height:1.55;
    white-space:pre-wrap;
    word-break:break-word;
    overflow-x:auto;
    box-shadow:0 10px 28px rgba(15,23,42,.35);
    border:1px solid #1e293b;
}

/* ============================================================
   GUILD BUTTONS — кастомные разделы гильдии
============================================================ */

.guild-buttons-layout{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:18px;
    align-items:start;
    min-height:400px;
}

.guild-buttons-list{
    background:#f8faff;
    border:1px solid #eaf0f9;
    border-radius:16px;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:600px;
    overflow-y:auto;
}

.guild-buttons-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:4px 8px 10px;
    border-bottom:1px solid #eef2f8;
    margin-bottom:6px;
}
.guild-buttons-header-title{
    font-size:11.5px; font-weight:800;
    color:#8a94a8; letter-spacing:.6px; text-transform:uppercase;
}
.guild-buttons-count{
    font-size:11px; font-weight:800; color:#1b4aa8;
    background:#eef4ff; border:1px solid #cfdff9;
    padding:2px 8px; border-radius:10px;
}

.guild-button-item{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    border-radius:12px;
    cursor:pointer;
    background:white;
    border:1px solid #e8edf5;
    transition:.15s;
    text-align:left;
    font-family:inherit;
    color:#2a3446;
    font-size:13.5px;
    font-weight:700;
    position:relative;
    min-width:0;
}
.guild-button-item:hover{
    border-color:#a9d6ff;
    transform:translateX(2px);
    box-shadow:0 4px 12px rgba(60,120,220,.12);
}
.guild-button-item.active{
    border-color:#2f7cff;
    background:linear-gradient(135deg,#f0f6ff,#e0eeff);
    color:#1b4aa8;
    box-shadow:0 6px 16px rgba(60,120,220,.18);
}
.guild-button-item-icon{
    width:26px; height:26px; border-radius:8px;
    background:linear-gradient(145deg,#eaf2ff,#dfeaff);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; flex-shrink:0;
    border:1px solid #cfdff9;
}
.guild-button-item.active .guild-button-item-icon{
    background:linear-gradient(145deg,#ffffff,#c9dcff);
    border-color:#9dccff;
}
.guild-button-item-title{
    flex:1; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.guild-buttons-empty{
    padding:26px 16px;
    text-align:center;
    color:#98a2b5;
    font-size:12.5px;
    line-height:1.5;
}

.guild-buttons-add-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:10px;
    border:1px dashed #a9d6ff;
    background:white;
    border-radius:12px;
    color:#1b4aa8;
    font-weight:800;
    font-size:13px;
    cursor:pointer;
    transition:.2s;
    margin-top:4px;
}
.guild-buttons-add-btn:hover{
    background:#f0f6ff;
    border-color:#2f7cff;
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(60,120,220,.15);
}
.guild-buttons-add-btn:disabled{
    opacity:.5; cursor:not-allowed; transform:none;
}

.guild-buttons-view{
    background:white;
    border:1px solid #eaf0f9;
    border-radius:16px;
    overflow:hidden;
    min-height:400px;
    display:flex;
    flex-direction:column;
}

.guild-buttons-view-header{
    padding:14px 20px;
    background:linear-gradient(180deg,#fbfdff,#f0f5fb);
    border-bottom:1px solid #e6eaf1;
    display:flex; align-items:center; gap:12px;
    flex-wrap:wrap;
}
.guild-buttons-view-title{
    flex:1; min-width:0;
    font-weight:800; color:#1a2332; font-size:16px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.guild-buttons-view-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.guild-buttons-view-actions .main-button{
    height:36px; padding:0 12px; font-size:12.5px; border-radius:10px;
}

.guild-buttons-view-body{
    flex:1;
    padding:0;
    overflow:auto;
    background:#f4f6fa;
}

.guild-buttons-view-frame{
    width:100%;
    min-height:480px;
    border:0;
    background:white;
    display:block;
}

.guild-buttons-view-empty{
    padding:60px 30px;
    text-align:center;
    color:#98a2b5;
    font-size:13px;
}
.guild-buttons-view-empty .big{
    font-size:56px;
    margin-bottom:14px;
    display:block;
    opacity:.5;
}

.gb-modal{
    position:fixed; inset:0; z-index:1300;
    background:rgba(15,25,45,.72);
    backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    animation:fade-in .2s ease;
}
.gb-modal-window{
    width:100%; max-width:560px;
    max-height:90vh;
    background:white;
    border-radius:20px;
    box-shadow:0 30px 80px rgba(0,0,0,.4);
    display:flex; flex-direction:column;
    overflow:hidden;
}
.gb-modal-header{
    padding:16px 22px;
    border-bottom:1px solid #e6eaf1;
    display:flex; align-items:center; gap:12px;
    background:linear-gradient(180deg,#ffffff,#fbfdff);
}
.gb-modal-title{
    flex:1; font-weight:800; color:#1a2332; font-size:16px;
}
.gb-modal-body{
    flex:1; overflow-y:auto;
    padding:20px 22px;
    display:flex; flex-direction:column; gap:14px;
}
.gb-modal-body .profile-field{ gap:6px; }

.gb-type-switch{
    display:flex; gap:6px; padding:5px;
    background:#eef2f8; border-radius:12px;
}
.gb-type-btn{
    flex:1; height:42px;
    border:none; border-radius:9px;
    background:transparent;
    color:#5a6577; font-weight:700; font-size:13px;
    cursor:pointer; transition:.15s;
    display:flex; align-items:center; justify-content:center; gap:6px;
}
.gb-type-btn:hover{ color:#1b4aa8; background:#f5f9ff; }
.gb-type-btn.active{
    background:white; color:#1b4aa8;
    box-shadow:0 2px 8px rgba(60,120,220,.15);
}

.gb-pane{ display:none; flex-direction:column; gap:10px; }
.gb-pane.active{ display:flex; }

.gb-dropzone{
    padding:18px 20px;
    border:2px dashed #a9d6ff;
    background:#f8fcff;
    border-radius:14px;
    text-align:center;
    cursor:pointer;
    transition:.2s;
    font-size:13px;
    color:#4a648f;
}
.gb-dropzone:hover{ background:#eaf4ff; border-color:#2f7cff; }
.gb-dropzone b{ color:#1b4aa8; }
.gb-dropzone .gb-drop-icon{
    font-size:38px; display:block; margin-bottom:8px; opacity:.75;
}
.gb-dropzone .gb-drop-hint{
    font-size:11.5px; color:#98a2b5; margin-top:6px; display:block;
}
.gb-dropzone input[type="file"]{ display:none; }

.gb-file-info{
    padding:10px 14px;
    background:#f0f6ff;
    border:1px solid #cfdff9;
    border-radius:10px;
    font-size:12.5px;
    color:#1b4aa8;
    font-weight:700;
    display:flex; align-items:center; gap:8px;
}
.gb-file-info.ok{ background:#e6f7ec; border-color:#a7e2ad; color:#155724; }
.gb-file-info.err{ background:#fdecec; border-color:#f0c0c0; color:#8a1717; }

.gb-modal-footer{
    padding:14px 22px;
    border-top:1px solid #e6eaf1;
    display:flex; gap:10px;
    background:#fbfdff;
}
.gb-modal-footer .main-button{ flex:1; height:44px; font-size:14px; }
.gb-modal-status{
    min-height:18px;
    padding:0 22px 12px;
    font-size:12.5px;
    color:#1e8f4a;
    font-weight:600;
}
.gb-modal-status.err{ color:#c33; }
.gb-modal-status.loading{ color:#7a849a; }

@media print{
    .sidebar, .rightbar, .topbar, .rules-toc, .rules-meta .main-button,
    .rules-screen-header, .brand, .top-profile{ display:none !important; }
    .layout{ display:block; }
    .content{ padding:0; }
    .rules-screen{ position:static; background:white; }
    .rules-screen-body{ padding:0; overflow:visible; }
    .rules-body{ box-shadow:none; border:none; padding:0; }
    .rules-h1{ page-break-after:avoid; }
    .rules-h2{ page-break-after:avoid; }
    body{ background:white; }
}

@media(max-width:1000px){
    .layout{ flex-direction:column; }
    .sidebar, .rightbar{ width:100%; }
    .conference-layout{ flex-direction:column; }
    .rooms-panel{ width:100%; }
    .mirotalk-container{ height:450px; }
    .profile-field-row{ grid-template-columns:1fr; }
    .dash-grid{ grid-template-columns:1fr; }
    .view-head{ flex-direction:column; align-items:flex-start; }
    .guild-hero{ flex-direction:column; align-items:center; text-align:center; }
    .guild-hero-actions{ justify-content:center; }
    .guild-tabs{ align-self:stretch; }
    .guild-tab-btn{ min-width:0; flex:1; padding:0 10px; font-size:13px; }
    .guild-overlay-header{ flex-wrap:wrap; height:auto; padding:12px 16px; gap:10px; }
    .guild-overlay-header-title{ width:100%; order:3; }
    .guild-overlay-body{ padding:14px; }
    .tpl-ai-hint{ flex-direction:column; padding:14px; }
    .template-viewer{ padding:10px; }
    .template-viewer-window{ max-height:none; border-radius:14px; }
    .editor-body{ padding:8px; }
    .editor-tab-btn{ padding:0 12px; font-size:12.5px; height:40px; }
    .visual-editor{ padding:14px; }
    .import-url-row{ flex-direction:column; }
    .import-url-row .main-button{ width:100%; }
    .import-grid{ grid-template-columns:1fr; }
    .import-grid-images{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
    .import-footer{ flex-direction:column; align-items:stretch; }
    .import-footer-actions .main-button{ flex:1; }

    .rules-screen-header{ height:auto; padding:12px 16px; flex-wrap:wrap; }
    .rules-screen-body{ padding:14px; }
    .rules-layout{ grid-template-columns:1fr; }
    .rules-toc{ position:static; max-height:none; }
    .rules-body{ padding:22px 20px; font-size:14px; }
    .rules-h1{ font-size:19px; }
    .rules-h2{ font-size:15px; }

    .guild-buttons-layout{ grid-template-columns:1fr; }
    .guild-buttons-list{ max-height:220px; }
}

@media(max-width:700px){
    .topbar{ height:auto !important; padding:10px 14px !important; flex-wrap:wrap; gap:10px; }
    .brand{ padding:4px 14px 4px 6px !important; gap:10px !important; }
    .brand-logo{ width:52px !important; height:52px !important; border-radius:14px !important; }
    .brand-name{ font-size:15px !important; letter-spacing:.6px !important; }
    .brand-sub{ font-size:8.5px !important; letter-spacing:1.2px !important; padding:2px 8px 2px 6px; }
    .brand-sub::before{ width:5px; height:5px; }
    .logo{ width:92px; height:92px; border-radius:20px; }
    .auth-card h1{ font-size:20px; }
    .license-card{ flex-direction:column; padding:16px; }
    .license-card-icon{ width:44px; height:44px; font-size:22px; }
    .license-pre{ font-size:11px; padding:14px; }
}