/* VYSHKA multi-profile · shorts / video / history · 20260803-profonline1 */
:root{
  --mp-bg:#eef2f7; --mp-surface:#fff; --mp-text:#14161a; --mp-mute:#667085;
  --mp-line:#d8e1ec; --mp-brand:#155eef; --mp-brand-deep:#1e3a8a;
  --mp-sky:#38bdf8; --mp-mint:#2ccf9b;
  --mp-ring:conic-gradient(from 210deg,#155eef,#38bdf8,#2ccf9b,#155eef);
}
html[data-theme="light"], html.vy-os[data-theme="light"]{
  color-scheme:light;
}
.mp-body{
  margin:0; min-height:100vh; font-family:"Onest",system-ui,sans-serif; color:var(--mp-text);
  background:
    radial-gradient(900px 380px at 10% -10%, rgba(21,94,239,.12), transparent 55%),
    radial-gradient(700px 320px at 90% 0%, rgba(56,189,248,.12), transparent 50%),
    linear-gradient(180deg,#e8eef6 0%, var(--mp-bg) 40%, #eef2f7 100%);
}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px;border-radius:8px}
.mp-top{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:rgba(238,242,247,.88); border-bottom:1px solid rgba(216,225,236,.7);
}
.mp-back,.mp-chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--mp-line);
  background:rgba(255,255,255,.92); color:var(--mp-brand-deep); font:650 14px/1 Onest,system-ui;
  text-decoration:none; cursor:pointer;
}
.mp-chip{background:var(--mp-brand); color:#fff; border-color:transparent}
.mp-top-spacer{flex:1}
.mp-shell{
  width:min(560px, calc(100% - 1.5rem)); margin:0 auto;
  padding:1rem 0 calc(2.5rem + env(safe-area-inset-bottom));
}
.mp-identity{
  display:grid; grid-template-columns:auto 1fr; gap:1rem 1.1rem; align-items:center;
  background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:22px;
  padding:1.15rem 1.2rem 1.25rem; box-shadow:0 18px 40px rgba(15,23,42,.06);
}
.mp-av-wrap{
  width:92px; height:92px; border-radius:50%; padding:3px; background:var(--mp-ring);
}
.mp-av{
  width:100%; height:100%; border-radius:50%; border:3px solid #fff; overflow:hidden;
  display:grid; place-items:center; color:#fff; font:700 1.5rem Unbounded,system-ui;
  background:linear-gradient(135deg,#155eef,#0ea5e9);
}
.mp-av img{width:100%; height:100%; object-fit:cover}
.mp-title{
  margin:0; font-family:"Unbounded",system-ui,sans-serif;
  font-size:clamp(1.2rem,3.2vw,1.55rem); letter-spacing:-.03em; line-height:1.15;
}
.mp-handle-row{display:flex; align-items:center; gap:.5rem; margin-top:.3rem; flex-wrap:wrap}
.mp-handle{color:var(--mp-mute); font-weight:650}
.mp-online{
  display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .55rem; border-radius:999px;
  background:#ecfdf5; color:#047857; font-size:.75rem; font-weight:700;
}
.mp-online::before{content:""; width:7px; height:7px; border-radius:50%; background:#10b981}
.mp-sub{margin:.45rem 0 0; color:var(--mp-mute); font-size:.9rem}
.mp-switcher{
  display:flex; align-items:center; gap:.55rem; margin-top:.75rem; flex-wrap:wrap;
  font-size:.85rem; color:var(--mp-mute);
}
.mp-switcher select{
  min-height:44px; min-width:160px; padding:0 12px; border-radius:12px;
  border:1px solid var(--mp-line); background:#fff; font:650 14px Onest,system-ui; color:var(--mp-text);
}
.mp-tabs{
  display:grid; grid-template-columns:repeat(3,1fr); margin:1rem 0 .75rem;
  background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:16px; overflow:hidden;
}
.mp-tab{
  appearance:none; border:0; background:transparent; min-height:48px; cursor:pointer;
  font:700 .9rem/1 Onest,system-ui; color:var(--mp-mute); border-bottom:2px solid transparent;
}
.mp-tab.is-on{color:var(--mp-brand-deep); border-bottom-color:var(--mp-brand); background:rgba(21,94,239,.04)}
.mp-panel{display:none}
.mp-panel.is-on{display:block; animation:mp-fade .22s ease}
@keyframes mp-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mp-shorts-feed{
  display:flex; flex-direction:column; gap:12px;
  max-height:min(72vh, 780px); overflow-y:auto; scroll-snap-type:y mandatory;
  border-radius:18px; padding:2px;
}
.mp-short{
  scroll-snap-align:start; position:relative; aspect-ratio:9/16; max-height:min(70vh,720px);
  border-radius:18px; overflow:hidden; color:#fff; border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(160deg,#1e3a8a,#0ea5e9 55%,#2ccf9b);
  box-shadow:0 16px 36px rgba(15,23,42,.14);
}
.mp-short-meta{
  position:absolute; left:14px; right:14px; bottom:16px; z-index:2;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.mp-short-meta strong{display:block; font-size:1.05rem}
.mp-short-meta span{opacity:.9; font-size:.88rem}
.mp-short-badge{
  position:absolute; top:12px; left:12px; z-index:2; padding:.28rem .6rem; border-radius:999px;
  background:rgba(0,0,0,.32); font:700 .72rem Onest,system-ui; letter-spacing:.02em;
}
.mp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; border-radius:14px; overflow:hidden}
.mp-tile{
  aspect-ratio:1; border:0; padding:0; cursor:pointer; position:relative;
  background:linear-gradient(145deg,#1d4ed8 10%,#38bdf8 70%,#93c5fd); color:#fff;
}
.mp-tile.video{background:linear-gradient(160deg,#1e3a8a,#0ea5e9 55%,#2ccf9b)}
.mp-tile .play{position:absolute; inset:0; display:grid; place-items:center; font-size:1.35rem; text-shadow:0 2px 8px rgba(0,0,0,.35)}
.mp-history{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.mp-history li{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  min-height:52px; padding:12px 14px; border-radius:14px; background:var(--mp-surface);
  border:1px solid var(--mp-line); font-size:.92rem;
}
.mp-history time{color:var(--mp-mute); font-size:.8rem; white-space:nowrap}
.mp-empty{margin:.9rem 0 0; color:var(--mp-mute); font-size:.92rem; text-align:center}
.mp-qr-box{
  position:fixed; inset:auto 16px 16px auto; z-index:40; width:min(260px, calc(100% - 32px));
  padding:1rem; border-radius:18px; background:#fff; border:1px solid var(--mp-line);
  box-shadow:0 20px 48px rgba(15,23,42,.18); text-align:center;
}
.mp-qr-box img{width:200px; height:200px; border-radius:12px; background:#fff}
.mp-qr-box p{margin:.6rem 0 0; color:var(--mp-mute); font-size:.85rem}
.mp-qr-close{
  position:absolute; top:8px; right:8px; width:36px; height:36px; border:0; border-radius:50%;
  background:#eff6ff; color:#1e40af; font-size:1.2rem; cursor:pointer;
}
@media (max-width:480px){
  .mp-identity{grid-template-columns:1fr; justify-items:center; text-align:center}
  .mp-switcher{justify-content:center}
  .mp-handle-row{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}


/* profonline1 · presence under @handle */
.mp-status{
  margin:.35rem 0 0; font-size:.82rem; font-weight:650; color:var(--mp-mute);
  min-height:1.15em;
}
.mp-status.mp-online,
.mp-status[data-online="1"]{
  display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .55rem; border-radius:999px;
  background:#ecfdf5; color:#047857; font-size:.75rem; font-weight:700; width:fit-content;
}
.mp-status.mp-online::before,
.mp-status[data-online="1"]::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#10b981; flex:0 0 auto;
}
.mp-status.mp-offline,
.mp-status[data-online="0"]{
  display:block; background:transparent; padding:0; color:var(--mp-mute); font-size:.82rem;
}
.mp-status.mp-offline::before,
.mp-status[data-online="0"]::before{ display:none; content:none; }
.mp-status[hidden]{ display:none !important; }
@media (max-width:480px){
  .mp-status.mp-online,.mp-status[data-online="1"]{ margin-left:auto; margin-right:auto; }
}