.auf-vk{max-width:1100px;margin:0 auto;padding:26px 16px;font-family:inherit;line-height:1.6;overflow-x:hidden}
.auf-vk, .auf-vk *{box-sizing:border-box}
.auf-vk img,.auf-vk input,.auf-vk select,.auf-vk textarea,.auf-vk button{max-width:100%}
.auf-vk .vk-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch}
.auf-vk .vk-wrap>*{min-width:0}
.auf-vk .vk-inner{margin:18px 0 0;padding:0}
.auf-vk .vk-inner>*{width:100%;min-width:0}
@media (max-width:900px){.auf-vk .vk-wrap{grid-template-columns:1fr}}
.auf-vk .vk-hero{
border-radius:22px;padding:22px 20px;
background:radial-gradient(1200px 500px at 20% 10%, rgba(0,160,255,.18), transparent 60%),
radial-gradient(900px 420px at 90% 20%, rgba(0,210,170,.16), transparent 55%),
linear-gradient(180deg, rgba(10,15,25,.92), rgba(10,15,25,.82));
color:#fff;position:relative;overflow:hidden;
box-shadow:0 14px 40px rgba(0,0,0,.18);
border:1px solid rgba(255,255,255,.10);
}
.auf-vk h1{margin:0 0 8px;font-size:34px;letter-spacing:.2px}
.auf-vk p{margin:0 0 14px;color:rgba(255,255,255,.85)}
.auf-vk .vk-badges{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 16px}
.auf-vk .vk-badge{
display:inline-flex;align-items:center;gap:8px;
padding:7px 10px;border-radius:999px;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);
font-size:13px;color:rgba(255,255,255,.92)
}
.auf-vk .vk-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.auf-vk .btn{
appearance:none;border:none;cursor:pointer;text-decoration:none;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:12px 14px;border-radius:14px;font-weight:900;
transition:transform .12s ease, filter .12s ease;
box-shadow:0 10px 22px rgba(0,0,0,.16);
}
.auf-vk .btn:active{transform:translateY(1px)}
.auf-vk .btn-primary{background:#ffffff;color:#0b1220}
.auf-vk .btn-ghost{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:none}
.auf-vk .btn-primary:hover{filter:brightness(.98)}
.auf-vk .btn-ghost:hover{background:rgba(255,255,255,.14)}
.auf-vk .vk-side{
border-radius:22px;padding:18px 16px;background:#fff;
border:1px solid rgba(0,0,0,.08);
box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.auf-vk .vk-side h2{margin:0 0 6px;font-size:18px}
.auf-vk .vk-status{display:flex;align-items:center;gap:10px;margin-top:6px}
.auf-vk .dot{width:10px;height:10px;border-radius:999px;background:#19c37d;box-shadow:0 0 0 6px rgba(25,195,125,.14)}
.auf-vk .dot.off{background:#b6b6b6;box-shadow:0 0 0 6px rgba(182,182,182,.18)}
.auf-vk .vk-status-title{font-weight:900}
.auf-vk .vk-status-sub{font-size:13px;color:rgba(0,0,0,.62)}
.auf-vk .vk-list{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.auf-vk .vk-item{padding:10px 12px;border-radius:16px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06)}
.auf-vk .vk-item b{display:block;margin-bottom:2px}
.auf-vk .vk-foot{margin-top:14px;font-size:13px;color:rgba(0,0,0,.62)}
.auf-vk .vk-mini{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;color:rgba(255,255,255,.9);font-size:13px}
.auf-vk .vk-mini a{color:rgba(255,255,255,.92);text-decoration:underline}
.auf-vk .vk-toast{
position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
background:#0b1220;color:#fff;border:1px solid rgba(255,255,255,.14);
padding:10px 12px;border-radius:14px;box-shadow:0 14px 38px rgba(0,0,0,.22);
font-size:13px;display:none;z-index:9999;max-width:92vw
} .auf-vk .u-card{
margin-top:16px;background:#fff;border:1px solid rgba(0,0,0,.08);
border-radius:22px;padding:16px 16px 14px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.auf-vk .u-card h3{margin:0 0 6px;font-size:18px;color:#0b1220}
.auf-vk .u-card p{margin:0 0 12px;color:rgba(0,0,0,.7)}
.auf-vk .u-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:860px){.auf-vk .u-grid{grid-template-columns:1fr}}
.auf-vk input,.auf-vk textarea{
width:100%;padding:12px 12px;border-radius:14px;
border:1px solid rgba(0,0,0,.14);outline:none;font:inherit;background:#fff;
}
.auf-vk textarea{min-height:92px;resize:vertical}
.auf-vk .u-row{display:grid;gap:10px}
.auf-vk .u-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.auf-vk .u-actions button{
appearance:none;border:none;cursor:pointer;
padding:12px 14px;border-radius:14px;font-weight:900;
background:#0b1220;color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.16);
}
.auf-vk .u-note{font-size:13px;color:rgba(0,0,0,.62)}
.auf-vk .u-msg{margin-top:10px;font-weight:900}
.auf-vk .u-msg.ok{color:#0a7a46}
.auf-vk .u-msg.err{color:#b00020}
.auf-vk .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .auf-vk .b-card{
margin-top:16px;background:#fff;border:1px solid rgba(0,0,0,.08);
border-radius:22px;padding:16px 16px 14px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.auf-vk .b-card h3{margin:0 0 6px;font-size:18px;color:#0b1220}
.auf-vk .b-card p{margin:0 0 12px;color:rgba(0,0,0,.7)}
.auf-vk .b-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:860px){.auf-vk .b-grid{grid-template-columns:1fr}}
.auf-vk .b-row{display:grid;gap:10px}
.auf-vk .b-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.auf-vk .b-actions button{
appearance:none;border:none;cursor:pointer;
padding:12px 14px;border-radius:14px;font-weight:900;
background:#0b1220;color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.16);
}
.auf-vk .b-note{font-size:13px;color:rgba(0,0,0,.62)}
.auf-vk .b-msg{margin-top:10px;font-weight:900}
.auf-vk .b-msg.ok{color:#0a7a46}
.auf-vk .b-msg.err{color:#b00020} .auf-vk .meet-wrap{
margin-top:16px;background:#0b1220;border:1px solid rgba(0,0,0,.12);
border-radius:22px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.auf-vk .meet-head{
display:flex;align-items:center;justify-content:space-between;
padding:12px 14px;background:rgba(255,255,255,.06);color:#fff;
}
.auf-vk .meet-title{font-weight:900}
.auf-vk .meet-end{
appearance:none;border:none;cursor:pointer;
padding:10px 12px;border-radius:14px;font-weight:900;
background:#ff4d4d;color:#fff;
}
.auf-vk .meet-box{width:100%;height:70vh;min-height:520px;background:#000}
@media (max-width:900px){.auf-vk .meet-box{height:72vh;min-height:520px}}
@media (max-width:520px){.auf-vk .meet-box{height:72vh;min-height:480px}}
.auf-vk .meet-note{padding:10px 14px;color:rgba(255,255,255,.78);font-size:13px;background:rgba(255,255,255,.04)} .auf-vk .meet-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;box-sizing:border-box;text-align:center;color:#fff}
.auf-vk .meet-empty h3{margin:0 0 8px;font-size:18px;letter-spacing:.2px}
.auf-vk .meet-empty p{margin:0;max-width:560px;color:rgba(255,255,255,.78)} .auf-vk .vk-c{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box}
.auf-vk .vk-c__card{
max-width:780px;width:min(780px, 100%);
background:rgba(255,255,255,.96);
border-radius:22px;padding:18px 18px 14px;
border:1px solid rgba(255,255,255,.18);
box-shadow:0 22px 70px rgba(0,0,0,.38);
}
.auf-vk .vk-c__title{margin:0 0 6px;font-size:20px;color:#0b1220}
.auf-vk .vk-c__sub{margin:0 0 12px;color:rgba(0,0,0,.72)}
.auf-vk .vk-c__actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 12px}
.auf-vk .vk-c__btn{
appearance:none;border:1px solid rgba(0,0,0,.12);background:#fff;cursor:pointer;
padding:12px 14px;border-radius:14px;font-weight:900
}
.auf-vk .vk-c__btn--primary{background:#0b1220;color:#fff;border-color:#0b1220;box-shadow:0 10px 22px rgba(0,0,0,.16)}
.auf-vk .vk-c__people{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
@media (max-width:640px){.auf-vk .vk-c__people{grid-template-columns:1fr}}
.auf-vk .vk-p{
display:flex;gap:12px;align-items:center;text-align:left;
padding:12px;border-radius:18px;border:2px solid rgba(0,0,0,.08);
background:#fff;cursor:pointer;transition:transform .06s ease,border-color .06s ease,box-shadow .06s ease
}
.auf-vk .vk-p:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.10)}
.auf-vk .vk-p.is-selected{border-color:#0b1220;box-shadow:0 12px 32px rgba(0,0,0,.16)}
.auf-vk .vk-p img{width:64px;height:64px;border-radius:999px;object-fit:cover;border:1px solid rgba(0,0,0,.10)}
.auf-vk .vk-p__name{font-weight:1000;color:#0b1220}
.auf-vk .vk-p__role{font-size:13px;color:rgba(0,0,0,.70);margin-top:2px} .b-agents{border:0;margin:0 0 14px;padding:0}
.b-agents legend{font-weight:700;margin:0 0 10px}
.b-agent{display:block;margin:0 0 10px}
.b-agent input{position:absolute;opacity:0;pointer-events:none}
.b-agent__card{display:flex;gap:12px;align-items:center;border:1px solid rgba(0,0,0,.10);border-radius:14px;padding:10px 12px;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.05);cursor:pointer;position:relative}
.b-agent__card img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.b-agent__meta{display:flex;flex-direction:column;gap:2px}
.b-agent__name{font-weight:800}
.b-agent__role{opacity:.85;font-size:14px}
.b-agent input:checked + .b-agent__card{border-color:rgba(0,0,0,.22);box-shadow:0 10px 22px rgba(0,0,0,.08)}
.b-agent input:checked + .b-agent__card::after{content:"✓";position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:999px;background:#19c37d;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:1000;font-size:14px;box-shadow:0 8px 18px rgba(0,0,0,.18)} .auf-vk{overflow-x:hidden;}
.auf-vk, .auf-vk *{box-sizing:border-box;}
.auf-vk .vk-wrap > *{min-width:0;}
.auf-vk img,
.auf-vk input,
.auf-vk textarea,
.auf-vk select,
.auf-vk button{max-width:100%;} .auf-vk #vkMeetBox{width:100%}
.auf-vk img,.auf-vk input,.auf-vk textarea,.auf-vk select,.auf-vk button{max-width:100%}  @media (min-width:901px){
.auf-vk .vk-inner{ margin-top:22px; }
} @media (max-width:520px){
.auf-vk .vk-actions{ flex-direction:column; }
.auf-vk .vk-actions .btn{ width:100%; }
.auf-vk h1{ font-size:26px; line-height:1.15; }
} .auf-vk .btn:focus-visible,
.auf-vk button:focus-visible,
.auf-vk input:focus-visible,
.auf-vk textarea:focus-visible,
.auf-vk select:focus-visible,
.auf-vk a:focus-visible{
outline: 3px solid rgba(0,160,255,.35);
outline-offset: 2px;
} .auf-vk input, .auf-vk select, .auf-vk textarea{
border: 1px solid rgba(0,0,0,.12);
box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.auf-vk input::placeholder,
.auf-vk textarea::placeholder{ color: rgba(0,0,0,.45); } .auf-vk .u-card, .auf-vk .b-card, .auf-vk .vk-side{ position:relative; }
.auf-vk .u-card::before,
.auf-vk .b-card::before,
.auf-vk .vk-side::before{
content:"";
position:absolute; left:16px; right:16px; top:0;
height:1px;
background: linear-gradient(90deg, transparent, rgba(0,160,255,.25), transparent);
} .auf-vk .b-agent input:checked + .b-agent__card{
background: rgba(25,195,125,.08);
border-color: rgba(25,195,125,.35);
}
@media (max-width:520px){
.auf-vk .b-agent__card{ padding:12px 12px; }
.auf-vk .b-agent__role{ font-size:13px; }
} .auf-vk .meet-head-left{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.auf-vk .meet-sub{ font-size:12px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.auf-vk .meet-actions{ display:flex; gap:10px; align-items:center; }
.auf-vk .meet-full{
display:inline-flex; align-items:center; gap:8px;
padding:8px 10px; border-radius:12px;
background: rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
color:#fff; text-decoration:none; font-weight:800;
} .auf-vk .meet-box.is-empty{ height:320px; min-height:320px; }
@media (max-width:520px){
.auf-vk .meet-box{ height:56vh; min-height:360px; }
.auf-vk .meet-box.is-empty{ height:260px; min-height:260px; }
} .auf-vk .u-drop{
position:relative;
padding:14px;
border-radius:16px;
border:1px dashed rgba(0,0,0,.22);
background:rgba(0,0,0,.02);
display:flex;
gap:14px;
align-items:center;
cursor:pointer;
}
.auf-vk .u-drop:focus-visible{ outline:3px solid rgba(0,160,255,.35); outline-offset:2px; }
.auf-vk .u-drop input[type="file"]{
position:absolute; inset:0;
opacity:0;
cursor:pointer;
}
.auf-vk .u-drop__title{ font-weight:900; }
.auf-vk .u-drop__sub{ font-size:12px; opacity:.7; margin-top:2px; }
.auf-vk .u-drop.is-drag{ border-color: rgba(0,160,255,.55); background: rgba(0,160,255,.06); }
.auf-vk .u-files{
margin-top:10px;
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap:10px;
}
@media (max-width:520px){
.auf-vk .u-files{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.auf-vk .u-file{
position:relative;
border-radius:14px;
overflow:hidden;
border:1px solid rgba(0,0,0,.10);
background:#fff;
box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.auf-vk .u-file img{
display:block;
width:100%;
height:110px;
object-fit:cover;
}
.auf-vk .u-file .u-file__meta{
padding:8px 10px;
font-size:12px;
opacity:.8;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.auf-vk .u-file .u-file__rm{
position:absolute; right:8px; top:8px;
width:30px; height:30px;
border-radius:999px;
border:1px solid rgba(0,0,0,.14);
background:rgba(255,255,255,.92);
cursor:pointer;
font-weight:900;
} .auf-vk .vk-toast{ animation: vkToastIn .18s ease-out; }
@keyframes vkToastIn{
from{ transform:translateX(-50%) translateY(8px); opacity:0; }
to{ transform:translateX(-50%) translateY(0); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
.auf-vk .vk-toast{ animation:none; }
} .auf-vk .u-files__head{font-weight:700;margin:4px 0 10px 0;color:#0a5;}