.vsd-1650 .vsd-element.vsd-element-4a9a7e8{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:center;--flex-wrap:wrap;}.vsd-1650 .vsd-element.vsd-element-18bc0c3{width:var( --container-widget-width, 79% );max-width:79%;--container-widget-width:79%;--container-widget-flex-grow:0;}.vsd-1650 .vsd-element.vsd-element-76f5e19{--display:flex;--min-height:496px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0em 3em;--row-gap:0em;--column-gap:3em;--flex-wrap:wrap;}.vsd-1650 .vsd-element.vsd-element-7d6bce7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.vsd-1650 .vsd-element.vsd-element-dafea1f{width:100%;max-width:100%;}.vsd-1650 .vsd-element.vsd-element-54b3361{width:100%;max-width:100%;}.vsd-1650 .vsd-element.vsd-element-4362614{width:100%;max-width:100%;}.vsd-1650 .vsd-element.vsd-element-b833de9{--display:flex;}.vsd-1650 .vsd-element.vsd-element-e616c53{width:100%;max-width:100%;}.vsd-1650 .vsd-element.vsd-element-1652d38{width:100%;max-width:100%;}.vsd-1650 .vsd-element.vsd-element-1652d38.vsd-element{--align-self:center;}.vsd-1650 .vsd-element.vsd-element-7b96b97{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--flex-wrap:wrap;--margin-top:1em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;--padding-top:0em;--padding-bottom:2em;--padding-left:0em;--padding-right:0em;}.vsd-1650 .vsd-element.vsd-element-8f5cd2d{width:var( --container-widget-width, 81% );max-width:81%;--container-widget-width:81%;--container-widget-flex-grow:0;}.vsd-1650 .vsd-element.vsd-element-87983ba{--display:flex;--min-height:50vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.vsd-1650 .vsd-element.vsd-element-cab51a4{width:100%;max-width:100%;}.vsd-1650 .vsd-element.vsd-element-1a29bb8{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(min-width:768px){.vsd-1650 .vsd-element.vsd-element-76f5e19{--width:82%;}.vsd-1650 .vsd-element.vsd-element-7d6bce7{--width:54%;}.vsd-1650 .vsd-element.vsd-element-b833de9{--width:40%;}.vsd-1650 .vsd-element.vsd-element-7b96b97{--width:98%;}.vsd-1650 .vsd-element.vsd-element-87983ba{--content-width:840px;}}@media(max-width:1366px) and (min-width:768px){.vsd-1650 .vsd-element.vsd-element-4a9a7e8{--width:100%;}.vsd-1650 .vsd-element.vsd-element-7d6bce7{--width:100%;}.vsd-1650 .vsd-element.vsd-element-b833de9{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.vsd-1650 .vsd-element.vsd-element-4a9a7e8{--width:100%;}}@media(max-width:767px){.vsd-1650 .vsd-element.vsd-element-4a9a7e8{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.vsd-1650 .vsd-element.vsd-element-18bc0c3{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.vsd-1650 .vsd-element.vsd-element-7d6bce7{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.vsd-1650 .vsd-element.vsd-element-b833de9{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.vsd-1650 .vsd-element.vsd-element-7b96b97{--margin-top:0em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;}.vsd-1650 .vsd-element.vsd-element-8f5cd2d{width:100%;max-width:100%;}}/* Start custom CSS for html, class: .vsd-element-18bc0c3 */:root{
--text:#eef2ff;--muted:#aab3c5;--r:16px;
--stroke:rgba(255,255,255,.07);--stroke2:rgba(255,255,255,.11);
--bg1:rgba(255,255,255,.06);--bg2:rgba(255,255,255,.02);
--field:rgba(255,255,255,.03);--field2:rgba(255,255,255,.045);
--accent:rgba(73,216,255,.55)
}
*{box-sizing:border-box}

.profile-card{
width:100%;
display:grid;
grid-template-columns:136px minmax(0,1fr);
gap:22px;
align-items:center;
padding:14px 18px;
border-radius:var(--r);
background:linear-gradient(180deg,var(--bg1),var(--bg2));
outline:1px solid var(--stroke);
font-family:Inter,system-ui,sans-serif;
color:var(--text)
}
.profile-card:focus-within{outline-color:rgba(73,216,255,.25)}

.avatar{
position:relative;
width:136px;
height:136px;
margin-left:4px;
align-self:center;
justify-self:center
}
.avatar img{
width:100%;height:100%;
border-radius:50%;
object-fit:cover;
outline:1px solid rgba(255,255,255,.10)
}
.avatar-cta{
position:absolute;
left:50%;bottom:-10px;
transform:translateX(-50%);
padding:5px 10px;
border-radius:999px;
font-size:10px;font-weight:600;
background:rgba(0,0,0,.55);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.10);
cursor:pointer;white-space:nowrap
}
.avatar-cta:hover{border-color:rgba(73,216,255,.35)}

.grid{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:28px;
row-gap:16px;
align-content:start
}

.f{display:grid;gap:6px}
.f span{font-size:11px;color:var(--muted);letter-spacing:.02em}

.v{
min-height:32px;
display:flex;
align-items:center;
padding:6px 8px;
border-radius:12px;
background:linear-gradient(180deg,var(--field2),var(--field));
border:1px solid var(--stroke2);
outline:none;
cursor:text;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.v::after{
content:"dbl";
margin-left:auto;
font-size:10px;
color:var(--muted);
opacity:.25
}
.v:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(73,216,255,.12);
background:rgba(73,216,255,.08)
}
.v:focus::after{opacity:0}

@media (max-width:520px){
.profile-card{
 grid-template-columns:96px 1fr;
 gap:14px;
 padding:14px
}
.avatar{
 width:96px;
 height:96px;
 margin-left:0
}
.grid{
 grid-template-columns:1fr;
 row-gap:12px
}
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-54b3361 */:root{
--text:#eef2ff;
--muted:#aab3c5;
--radius:18px;
--shadow:0 14px 40px rgba(0,0,0,.45)
}
*{box-sizing:border-box}

/* section header */
.section-title{
display:flex;
align-items:center;
gap:10px;
font-size:22px;
font-weight:800;
letter-spacing:-.015em;
font-family:"Manrope","IBM Plex Sans",Inter,system-ui,sans-serif;
color:var(--text)
}
.section-sub{
margin-top:2px;
font-size:13px;
color:var(--muted)
}

/* dashboard */
.dashboard{
display:grid;
gap:14px;
font-family:"IBM Plex Sans",Inter,system-ui,sans-serif;
color:var(--text)
}
.card{
padding:18px;
border-radius:var(--radius);
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
box-shadow:var(--shadow);
outline:1px solid rgba(255,255,255,.05)
}
.projects{display:grid;gap:10px}

/* project card */
.project,
a.project{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:12px;
padding:12px;
border-radius:14px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
text-decoration:none;
color:inherit
}
.project:hover,
a.project:hover{
border-color:rgba(73,216,255,.4)
}

/* IMPORTANT: disable pointer-events globally BUT allow avatars */
a.project *{
pointer-events:none
}
a.project .avatars,
a.project .avatar,
a.project .avatar img{
pointer-events:auto
}

/* title */
.project-title{
font-size:15px;
font-weight:600;
letter-spacing:-.01em
}

/* meta */
.meta{
font-size:12px;
color:var(--muted)
}
.deadline{
margin-top:4px;
font-size:12px;
color:#ffd479
}
.deadline.overdue{color:#ff6b7a}
.deadline.soon{color:#ffe29a}

/* status */
.status{
font-size:11px;
padding:4px 10px;
border-radius:999px;
font-weight:600;
white-space:nowrap
}
.s-idea{background:rgba(167,139,250,.18)}
.s-writing{background:rgba(73,216,255,.18)}
.s-recording{background:rgba(255,200,73,.18)}
.s-mix{background:rgba(73,255,171,.18)}
.s-master{background:rgba(255,90,122,.18)}
.s-approved{background:rgba(120,255,120,.22)}

/* avatars */
.avatars{
display:flex;
align-items:center;
margin-top:6px
}
.avatars .avatar{
width:26px;
height:26px;
border-radius:50%;
border:2px solid #0b1020;
background:#1a2238;
overflow:hidden;
margin-left:-7px;
flex:0 0 auto;
cursor:default
}
.avatars .avatar:first-child{margin-left:0}
.avatars .avatar img{
width:100%;
height:100%;
object-fit:cover;
display:block
}

/* tooltip polish (native title stays, this just improves hover feel) */
.avatars .avatar:hover{
z-index:2;
transform:translateY(-1px);
box-shadow:0 6px 14px rgba(0,0,0,.4)
}





/* scroll addon – guaranteed full 3 cards */
.projects{
max-height:calc((3 * 122px) + (2 * 18px)); /* card height + gaps */
overflow-y:auto;
padding-right:6px;
scrollbar-width:thin;
scrollbar-color:rgba(73,216,255,.5) transparent;
}
.projects::-webkit-scrollbar{width:6px}
.projects::-webkit-scrollbar-thumb{
background:rgba(73,216,255,.45);
border-radius:10px
}
.projects::-webkit-scrollbar-track{background:transparent}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-1652d38 */.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.stat{
padding:16px;border-radius:14px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.035);
transition:border-color .2s, box-shadow .2s, background .2s
}
.stat:hover{
background:rgba(255,255,255,.06);
box-shadow:inset 0 0 0 1px rgba(73,216,255,.25)
}
.stat .value{font-size:26px;font-weight:800;letter-spacing:-.02em}
.stat .label{font-size:12px;color:var(--muted)}

.stat.total{background:linear-gradient(180deg,rgba(73,216,255,.18),rgba(255,255,255,.02))}
.stat.done{background:linear-gradient(180deg,rgba(120,255,120,.22),rgba(255,255,255,.02))}
.stat.bpm{background:linear-gradient(180deg,rgba(255,200,73,.18),rgba(255,255,255,.02))}
.stat.key{background:linear-gradient(180deg,rgba(167,139,250,.18),rgba(255,255,255,.02))}
.stat.style{background:linear-gradient(180deg,rgba(73,216,255,.18),rgba(255,255,255,.02))}
.stat.active{background:linear-gradient(180deg,rgba(73,255,171,.18),rgba(255,255,255,.02))}
.stat.last{
grid-column:1/-1;
background:linear-gradient(180deg,rgba(73,216,255,.22),rgba(255,255,255,.04));
border-color:rgba(73,216,255,.45)
}
.stat.last:hover{
box-shadow:inset 0 0 0 1px rgba(73,216,255,.35)
}


/* stats links – no underline */
.stats a{
text-decoration:none;
color:inherit
}
.stats a:hover{
text-decoration:none
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-8f5cd2d *//* NOTES MODULE – FULL SAFE CSS (isolated) */

.notes{
display:grid;
gap:10px;
max-height:420px;
overflow-y:auto;
padding-right:6px;
scrollbar-width:thin;
scrollbar-color:rgba(73,216,255,.45) transparent
}

.notes::-webkit-scrollbar{width:6px}
.notes::-webkit-scrollbar-thumb{
background:rgba(73,216,255,.45);
border-radius:10px
}
.notes::-webkit-scrollbar-track{background:transparent}

.note{
display:grid;
grid-template-columns:1fr auto;
gap:12px;
padding:12px;
border-radius:14px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
align-items:flex-start
}

.note:hover{border-color:rgba(73,216,255,.4)}

.note-meta{
font-size:12px;
color:var(--muted)
}

.note-text{
margin-top:4px;
font-size:13px;
line-height:1.45
}

.note-author{
display:flex;
align-items:center;
gap:8px;
margin-top:6px
}

.note-author .avatar{
width:22px;
height:22px;
border-radius:50%;
overflow:hidden;
flex:0 0 auto
}

.note-author .avatar img{
width:100%;
height:100%;
object-fit:cover;
display:block
}

.note-date{
font-size:11px;
color:var(--muted)
}

.note .status{
align-self:flex-start;
margin-top:2px;
white-space:nowrap
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-cab51a4 */:root{--text:#eef2ff;--muted:#aab3c5;--a1:rgba(180,190,210,.85);--a2:rgba(150,155,175,.85)}
*{box-sizing:border-box}
.loaderWrap{width:100%;padding:18px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);font-family:Manrope,system-ui;color:var(--text)}
.loader{position:relative;height:20px;border-radius:999px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));outline:1px solid rgba(255,255,255,.12);cursor:grab}
.loader:active{cursor:grabbing}
.fill{position:absolute;left:0;top:0;bottom:0;width:40%;border-radius:999px;background:linear-gradient(120deg,var(--a1),var(--a2),var(--a1));background-size:300% 100%;animation:flow 2.6s linear infinite;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 14px rgba(0,0,0,.45)}
.fill::before{content:"";position:absolute;inset:0;background:radial-gradient(5px 5px at 22% 55%,rgba(255,255,255,.25),transparent 70%),radial-gradient(4px 4px at 58% 35%,rgba(255,255,255,.18),transparent 70%),radial-gradient(3px 3px at 78% 70%,rgba(255,255,255,.22),transparent 70%);background-size:140px 100%;animation:particles 4.5s linear infinite;opacity:.45}
.fill::after{content:"";position:absolute;inset:-40% -20%;background:radial-gradient(60% 30% at 50% 50%,rgba(0,0,0,.25),transparent 65%);animation:pulse 3.8s ease-in-out infinite;opacity:.55}
.loader::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:sweep 6s ease-in-out infinite;opacity:.35;pointer-events:none}
.label{margin-top:10px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:10px}
.percent{font-weight:800;color:var(--text);cursor:pointer;user-select:none;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.05);outline:1px solid rgba(255,255,255,.08)}
@keyframes flow{to{background-position:300% 0}}
@keyframes particles{to{background-position:140px 0}}
@keyframes pulse{0%,100%{transform:translateX(-6%) scaleY(.95)}50%{transform:translateX(6%) scaleY(1.05)}}
@keyframes sweep{0%{opacity:0;transform:translateX(-120%)}50%{opacity:.5}100%{opacity:0;transform:translateX(120%)}}


/* UX: няма подсказки преди unlock */
.loader{cursor:default}
.loader:active{cursor:default}
.percent{cursor:default}
.loader.unlocked{cursor:grab}
.loader.unlocked:active{cursor:grabbing}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-3a058a5 */:root{
--text:#eef2ff;--muted:#aab3c5;--focus:rgba(73,216,255,.35);
--radius:18px;--shadow:0 14px 40px rgba(0,0,0,.45)
}
*{box-sizing:border-box}

/* form */
.login{
width:100%;
padding:22px;
border-radius:var(--radius);
background:
radial-gradient(700px 200px at 20% -30%,rgba(73,216,255,.12),transparent 55%),
radial-gradient(700px 200px at 80% 0%,rgba(167,139,250,.12),transparent 58%),
linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);
outline:1px solid rgba(255,255,255,.05);
font-family:"IBM Plex Sans",Inter,system-ui,sans-serif;
color:var(--text);
overflow:hidden
}

/* title */
.titleWrap{margin-bottom:18px}
h1{
margin:0;
font-family:"Manrope","IBM Plex Sans",Inter,system-ui,sans-serif;
font-size:30px;font-weight:800;letter-spacing:-.015em
}
.subtitle{margin-top:4px;font-size:13px;color:var(--muted)}

/* fields */
.field{
position:relative;
width:100%;
margin-bottom:14px
}
.field input{
all:unset;
display:block;
width:100%;
max-width:100%;
padding:14px 14px 14px 46px;
border-radius:14px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
color:var(--text);
box-sizing:border-box;
transition:.15s
}
.field input:focus{
border-color:rgba(73,216,255,.6);
box-shadow:0 0 0 4px var(--focus)
}

/* icons */
.icon{
position:absolute;left:14px;top:50%;
transform:translateY(-50%);
width:18px;height:18px;
opacity:.65;pointer-events:none
}
.icon svg{width:100%;height:100%;fill:white}

/* actions */
.actions{
display:flex;justify-content:space-between;align-items:center;
gap:12px;margin-top:18px;flex-wrap:wrap
}
.links{display:flex;gap:14px;align-items:center}
a{
color:var(--muted);font-size:13px;text-decoration:none
}
a:hover{color:var(--text);text-decoration:underline}

/* buttons */
button{
all:unset;cursor:pointer;
padding:12px 18px;border-radius:14px;
font-weight:600;box-sizing:border-box
}
.btn-primary{
background:
radial-gradient(120% 160% at 20% 20%,rgba(73,216,255,.18),transparent 60%),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
box-shadow:0 16px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1)
}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary{
background:rgba(255,255,255,.04);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06)
}

/* joke */
#joke{
display:none;margin-top:16px;
padding:12px 14px;border-radius:14px;
background:rgba(255,90,122,.14);
font-size:13px;line-height:1.45
}
#joke:target{display:block}
.fakeBtn{
margin-top:10px;display:inline-block;
padding:8px 12px;border-radius:999px;
background:rgba(255,255,255,.08);
font-size:12px;opacity:.7
}

/* footer */
.footerNote{margin-top:14px;font-size:12px;color:var(--muted)}/* End custom CSS */
/* Start custom CSS for container, class: .vsd-element-1a29bb8 *//* hidden by default */
.lgn-f{
  opacity:0!important;
  max-height:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  transition:opacity .45s ease, max-height .45s ease;
}
/* reveal */
.lgn-f.is-visible{
  opacity:1!important;
  max-height:2000px!important;
  pointer-events:auto!important;
}/* End custom CSS */