header {position: relative;}
.member-header { background-color: var(--bg-header); padding: 15px 10px; display: flex; justify-content:space-between;align-items:center;flex-wrap: wrap; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.main-nav .nav-link { color: var(--text-secondary); text-decoration: none; margin-left: 25px; font-size: 0.95em; font-weight: 500; padding: 10px 5px; position: relative; transition: color 0.3s ease; }
.main-nav .nav-link:hover { color: var(--text-primary); }
.main-nav .nav-link.active { color: var(--accent-primary); font-weight: 600; }
.main-nav .nav-link.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); border-radius: 2px; }
.user-info {display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;}
.user-info>* { font-size: 0.9em; }
.user-info>.buttons{display:flex;gap:10px;align-items:center;}
.credits-display, .current-plan { color: var(--text-secondary); }
.credits-display #creditsAmountValue, .current-plan-value { color: var(--text-primary); font-weight: 600; }
.credits-display #creditsAmountValue { color: var(--accent-primary); }
.upgrade-button { background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); color: white; border: none; padding: 8px 18px; border-radius: 20px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 0.85em; box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.2), 0 2px 8px rgba(var(--accent-secondary-rgb), 0.2); text-decoration: none;}
.upgrade-button:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.3), 0 4px 12px rgba(var(--accent-secondary-rgb), 0.3); }
.profile-icon { font-size: 1.8em; color: var(--text-secondary); cursor: pointer; transition: color 0.3s ease; }
.profile-icon a {color: var(--text-secondary);}
.profile-icon:hover { color: var(--accent-primary); }
.profile-link {color: var(--text-primary); text-decoration: none;}
.profile-link:hover {color: #fff;}

#Object .Main {display: flex; align-items: start; margin: 40px; justify-content: space-around;}
#Object .Main>div {flex-basis: 50%; position: relative; margin: 20px; flex-grow: 1;}
#Object .Main>.Display {display: flex; justify-content: center;}
#Object .Main>.Display>video { /*height: auto; */max-height: calc(100vh - 120px); max-width: calc(100% - 40px)}
#Object .Main>.Display>img { max-height: calc(100vh - 120px); object-fit: contain; max-width: calc(100% - 40px);}
#Object .Main>.Display>model-viewer { max-height: calc(100vh - 120px); max-width: calc(100% - 40px); width: 100%; height: 100vh;}
#Object .Main .Settings {padding: 0 20px;}

#Object .Main>.Display #Tools {display: flex; gap: 6px; position: absolute; font-size: 2em; line-height: 2em; color: rgba(100,100,100,0.8);}

#Object .Main>.Display a {display: block; color: rgba(100,100,100,0.8);}
#Object .Main>.Display a:hover {color: #fff;}

/*#Object .SettingsForm .Props.NotReq {display: none;}*/

#Object .SettingsForm .Prop {display: flex; flex-wrap: wrap; padding: 10px 0; align-items: center;}
#Object .SettingsForm .Prop>* {padding: 4px; flex-shrink: 0; box-sizing: border-box;}
#Object .SettingsForm .Prop>label {flex-basis: 25%; text-transform: capitalize;}
#Object .SettingsForm .Prop>.Var {flex-basis: 75%;}
#Object .SettingsForm .Prop>.Descr {width: 100%; font-size: 14px; line-height: normal; color: var(--text-secondary); padding-top: 0;}
#Object .SettingsForm .Prop textarea {width: 100%; height: 150px; padding: 20px; color: var(--text-secondary); background: transparent; border: 1px solid var(--text-secondary);
border-radius: 10px; box-shadow: none;}
#Object .SettingsForm .Prop input {width: 100%; padding: 6px; color: var(--text-secondary); background: transparent; border: 1px solid var(--text-secondary);
border-radius: 10px; box-shadow: none;}
#Object .SettingsForm .Prop select {width: 100%; padding: 6px; color: var(--text-secondary); background: transparent; border: 1px solid var(--text-secondary);
border-radius: 10px; box-shadow: none;}

#Object .SettingsForm .Prop.Textarea {display: grid; grid-template-columns: repeat(10, 10%);}
#Object .SettingsForm .Prop.Textarea>label {grid-column: 1/3; grid-row: 1/1;}
#Object .SettingsForm .Prop.Textarea>.Descr {grid-column: 1/3; grid-row: 2/3;}
#Object .SettingsForm .Prop.Textarea>.Var {grid-column: 3/11; grid-row: 1/3;}

#Object .SettingsForm .Prop.Object {display: block;}
#Object .SettingsForm>.Props>.Prop.Object>.Obj {padding-left: 20px;}
#Object .SettingsForm>.Props>.Prop.Object>.Descr {padding-left: 20px;}
#Object .SettingsForm>.Props>.Prop.Object>.Obj>.Props>.Prop.Object>.Obj {padding-left: 40px;}
#Object .SettingsForm>.Props>.Prop.Object>.Obj>.Props>.Prop.Object>.Descr {padding-left: 40px;}

#Object .Images img {width: 100%; height: auto; margin-top: 10px; border-radius: 4px;}

@media (max-width: 1440px) {
    .main-nav .nav-link{margin-left:0;}
    .user-info > .buttons{margin-left:0;}
}

@media (max-width: 1280px) {
	.logo{display:none;}
	.main-nav{margin-left:0;}
}

@media (max-width: 992px) {
    nav {display: none;}
}

@media (max-width: 900px) {
    #Object .Main {display: flex; margin: 20px;}    
}

@media (max-width: 860px) {
    #Object .Main {flex-direction: column; margin: 20px 0;}
    #Object .Main>div {width: 100%;}
}

@media (max-width: 600px) {
    #Object .Main>.Display {margin: 0;}
    #Object .Main>.Settings {margin: 40px 0;}
}

.ChunksTitle {
    font-size: 24px;
    font-weight: bold; padding-bottom : 20px;}
    
.ChunksHeader {font-size: 18px;
    font-weight: bold;}
    
.ChunksHeader>div {box-sizing: border-box; padding: 40px; border-top: 2px white solid; border-bottom: 2px white solid;}

.Chunks>div {display: flex;}
.Chunks>div:nth-child(even) {background-color: rgb(80,80,80);}
.Chunks>div>div {box-sizing: border-box; flex-basis: 50%;}
.Chunks>div>div>div {box-sizing: border-box; padding: 40px;}
.Chunks>div>div>div+div {padding-top: 0;}
.Chunks>div>div>div img {width: 100%; height: auto;}
.Chunks>div>div>div video {width: 100%; height: auto;}
.Chunks>div>div>div.json_storyboard {white-space: pre-wrap;}

.Error {color: red;}